className в <Field> в форме Redux

Question

Я создал редукционную форму, и я хочу добавить 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> 
) 

или лучший подход, если слишком много реквизита есть, Вы можете использование 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.

Вы можете ознакомиться с этим официальным примером примера сокращения: http://redux-form.com/6.5.0/examples/react-widgets/, чтобы получить больше информации.

Надеется, что это помогает :)

Answer 2

Вы можете использовать метод объект деструктурирующего установить Classname.

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