Redux 表单中 <Field> 中的 className

className in <Field> in Redux Form

提问人：RamAlx 提问时间：2/13/2017 更新时间：8/10/2021 访问量：7670

问：

我创建了一个 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 标签，但我看到我添加的占位符和类名都没有显示。如何自定义每个字段？

redux-form 类名

评论

0赞 gustavohenke 2/13/2017
这完全取决于您的函数是什么样子的。你能给我们看看吗？inputField
0赞 Hardik Modha 2/13/2017
您传递到的所有道具都将在您的组件中可用。所以在你的组件中，你只需要解构像 .这样一来，你传递到的所有道具都将在你的组件中可用。FieldinputFieldinputField<inputField {...this.props} />FieldinputField
0赞 RamAlx 2/13/2017
我的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> ）;
1赞 Hardik Modha 2/14/2017
而不是将代码粘贴到注释中。请编辑您的问题。

答：

13赞 Hardik Modha 2/14/2017 #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>
)

或者更好的方法，如果道具太多，可以使用对象解构 

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/ 以获得更多的想法。

希望对:)有所帮助

评论

0赞 RamAlx 2/14/2017
最后一个 InputField 组件向我显示了一个无法读取 props meta 和 input 的错误
0赞 Hardik Modha 2/14/2017
第一个有效吗？我不太确定第二个，因为我自己没有尝试过。我需要调查一下。
0赞 RamAlx 2/14/2017
第一个也不起作用。只有当我直接分配一个值时，它才起作用。更具体地说，如果我分配 etc value=“fsfsdfs”它会起作用，但如果我分配 value={value} 并且在我的组件中我设置 value=“fsdfsdfsd”它将不起作用
0赞 Hardik Modha 2/14/2017
我还做了一些其他的改变。你能尝试更新的答案吗？
0赞 RamAlx 2/14/2017
不，它没有用。此外，返回会给我一个错误
1赞 luis 12/19/2017 #2

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

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

评论

0赞 DBrown 12/10/2018
与其他方法相比，我真的很喜欢这种方法，并且消除了在组件上添加 className 的需要，这可以被认为是一种不好的做法。
1赞 Paul A Jungwirth 5/30/2018 #3

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

<Field name="foo" component="select" className="form-control">
</Field>
0赞 Lesley Livingstone 8/10/2021 #4

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

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

上一个：React-select 不在字段中显示所选值

下一个：时刻格式返回无效日期