Redux Form中<Field>中的className是什么意思？

Question

我已经创建了一个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>

我已经添加了一个className标签，但是我发现既没有显示我添加的占位符，也没有显示className。我该如何自定义每个字段？

- RamAlx

---

这完全取决于你的 inputField 函数长什么样子。你能给我们展示一下吗？ - gustavohenke

你传递给 Field 的所有 props 都将在你的 inputField 组件中可用。因此，在你的 inputField 组件中，你只需要像 <inputField {...this.props} /> 这样解构 props。通过这种方式，你传递给 Field 的所有 props 都将在你的 inputField 组件中可用。 - Hardik Modha

我的inputField组件如下所示：export default field => ( <div> <Input {...field.input} type={field.type}> {field.children} </Input> {field.meta.touched && field.meta.error && <span className="error">{field.meta.error}</span>} </div> ); - RamAlx

请不要将您的代码粘贴在评论中，而是请编辑您的问题。 - Hardik Modha

Answer 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>
)

或者更好的方法是，如果有太多的props，你可以使用对象解构。

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/，以获取更多想法。
希望这有所帮助 :)

- Hardik Modha

---

最后一个 InputField 组件显示了一个错误，无法读取 props meta 和 input。 - RamAlx

我还做了一些其他的修改。你能试试更新后的答案吗？ - Hardik Modha

我已经撤回了我的答案，我测试了第一个版本，它运行良好。你能复制它并尝试一下吗？ - Hardik Modha

没问题，谢谢你！但我还想问你另外一件事。我想让我的框有一个默认值。框有一个value属性可以分配一个值吗？ - RamAlx

非常感谢您的帮助，您真的很有用。 - RamAlx

Answer 2

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

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

- luis

---

我非常喜欢这种方法，它可以避免在组件上添加className，这是一种被认为不好的做法。 - DBrown

Answer 3

我意识到你正在使用自定义渲染器，通过 component={InputField} 语句，但对于其他人来说（因为我在文档中找不到它）：如果你正在使用内置的渲染器之一，比如 component="input" 或 component="select"，你可以只需添加 className，渲染器将应用它，例如：

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

- Paul A Jungwirth

Answer 4

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

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

- Lesley Livingstone