Question

我已经创建了一个redux-form，我想在每个Field中添加className，用css自定义它们。每个字段的代码是：

for(NSArray *subArray in [SFSpeechRecognizer supportedLocales]) {
        NSLog(@"LOCALES%@",subArray);
    }

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

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

或更好的方法，如果有太多道具，您可以使用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/以获取更多信息。

希望有所帮助：）

Answer 2

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

＆＃13;

{{1}}

＆＃13;

Answer 3

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

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

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

Redux表单中<field>中的className

4 个答案: