Redux表单中<Field>中的className

Question

我创建了一个redux-form,我想在每个Field中添加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.我该如何自定义每个字段？

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

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

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

希望能帮助到你 :)