Redux 表单中 <Field> 中的 className

Posted 2023-02-19

【中文标题】Redux 表单中 <Field> 中的 className

【英文标题】：className in <Field> in Redux Form

【发布时间】：2017-07-01 05:32:52

【问题描述】：

我创建了一个 redux-form，我想将 className 添加到每个字段以使用 css 自定义它们。 每个字段的代码是：

<Form onSubmit=handleSubmit(requestAccountsFilter)>
        <FormGroup row>
          <Field
            id="symbol"
            name="symbol"
            type="text"
            component=inputField
            placeholder="Enter Product Here"
          />
          <Field id="side" name="side" component=inputField type="select">
            <option value=null>Any</option>
            <option value="Buy">Buy</option>
            <option value="Sell">Sell</option>
          </Field>
          <Field id="status" name="status" component=inputField type="select">
            <option value=null>Any</option>
            <option value="Working">Working</option>
            <option value="Completed">Completed</option>
          </Field>
          <Button name="submit-btn" className="filter-submit-btn" color="danger" type="submit">
        Submit
      </Button>
    </FormGroup>
  </Form>

我添加了一个类名标签，但我看到我添加的占位符和类名都没有显示。如何自定义每个字段？

【问题讨论】：

这完全取决于你的inputField 函数是什么样子的。可以给我们看看吗？

您传递给Field 的所有道具都将在您的inputField 组件中可用。所以在你的inputField 组件中，你只需要像<inputField ...this.props /> 这样解构props。这样，您传递给Field 的所有道具都将在您的inputField 组件中可用。`

我的 inputField 组件是这样的：export default field => ( field.children field.meta.touched && field.meta.error && field.meta.error );

而不是在评论中粘贴您的代码。请编辑您的问题。

【参考方案1】：

<Field 
    type="text" 
    className="myClass"
    component=InputField 
    placeholder="Type here..."
/>

您的自定义 InputField 应该类似于

（这个例子我取自http://redux-form.com/6.5.0/examples/submitValidation/）

export const InputField = ( input, type, placeholder, className, meta:  touched, error  ) => (
  <div>
      <input ...input placeholder=placeholder type=type className=className/>
      meta.touched && meta.error && <span>meta.error</span>
  </div>
)

或者更好的方法，如果道具太多，可以使用object destructuring

export const InputField = (field) => ( 
    <div> 
        <input ...field.input ...field /> 
        field.meta.touched && field.meta.error && <span className="error">field.meta.error</span> 
    </div>
)

...field 将提取您在Field 中传递的所有道具。

您可以查看这个官方的 redux-form 示例：http://redux-form.com/6.5.0/examples/react-widgets/ 以获得更多想法。

希望对你有帮助:)

【讨论】：

最后一个 InputField 组件向我显示了一个错误，无法读取道具元和输入

第一个有用吗？我不太确定第二个，因为我自己没有尝试过。我需要调查一下。

第一个也不起作用。只有当我直接分配一个值时它才有效。更具体地说，如果我分配 etc value="fsfsdfs" 它会起作用，但如果我分配 value=value 并且在我的组件中我设置 value="fsdfsdfsd" 它不会起作用

我还做了一些其他的改变。你能试试更新的答案吗？

不，它没有用。也返回给我一个错误

【参考方案2】：

您可以使用对象解构方法来设置className。

<Field 
        type="text" 
        input=className:'red'
        component=InputField 
        placeholder="Type here..."
    />

【讨论】：

我真的很喜欢这种方法而不是其他方法，并且不需要在组件上添加 className，这可能被认为是一种不好的做法。

【参考方案3】：

我知道您通过说 component=InputField 来使用自定义渲染器，但是对于其他来到这里的人（因为我在文档中找不到它）：如果您使用的是内置渲染器之一，例如 @987654322 @ 或component="select"，你可以添加className 渲染器会应用它，例如：

<Field name="foo" component="select" className="form-control">
</Field>

【参考方案4】：

根据定义，您传递给 Field 组件的任何内容都应该作为 input 属性传递给 InputField 组件。因此，您的 InputField 组件应如下所示：

<div> 
    <InputField  ...field.input > field.children </InputField> 
    field.meta.touched && field.meta.error && <span className="error"> 
    field.meta.error</span>
</div>