web-dev-qa-db-fra.com

className dans <Field> dans le formulaire Redux

J'ai créé un formulaire redux et je souhaite ajouter className à chaque champ pour les personnaliser avec css ..__ Le code pour chaque champ est le suivant:

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

J'ai ajouté une balise className mais je constate que ni l'espace réservé que j'ai ajouté n'est affiché, ni le className. Comment puis-je personnaliser chaque champ?

reduxredux-formclassname
14
user7334203
<Field 
    type="text" 
    className="myClass"
    component={InputField} 
    placeholder="Type here..."
/>

et votre coutume InputField devrait être quelque chose comme

(J'ai pris cet exemple dans 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>
)

ou une meilleure approche, s'il y a trop d'accessoires, vous pouvez utiliser 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} extraira tous les accessoires que vous avez passés dans Field. 

Vous pouvez consulter cet exemple officiel de formulaire redux: http://redux-form.com/6.5.0/examples/react-widgets/ pour plus d’idées.

J'espère que ça aide :)

9
Hardik Modha

Vous pouvez utiliser la méthode de déstructuration d'objet pour définir className.

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

1
luis

Je me rends compte que vous utilisez un moteur de rendu personnalisé en disant component={InputField}, mais pour les autres qui viennent ici (car je ne le trouve pas dans la documentation): si vous utilisez un des moteurs de rendu intégrés comme component="input" ou component="select", vous pouvez simplement ajoutez className et le moteur de rendu l'appliquera, par exemple:

<Field name="foo" component="select" className="form-control">
</Field>
1
Paul A Jungwirth