web-dev-qa-db-fra.com

React Final Form. Comment définir la valeur du champ à partir de l'état du composant

J'essaie d'ajouter un sélecteur de date à mon forum. Le problème est que le sélecteur de date ne fonctionne que via l'état du composant. ce qui signifie que les valeurs sélectionnées entrent dans l'état.

J'essaie de forcer un champ de formulaire final à utiliser cette valeur d'état. Mais je n'arrive pas à comprendre.

Essayant essentiellement de faire ceci:

<Field name="field1" value={this.state.date}/>
reactjsreact-final-formfinal-form
4
jdstrong95

Ummmmm, je vais supposer que vous ne voulez pas définir une valeur initiale que l'utilisateur final peut changer. Veuillez me faire savoir si ce n'est pas le cas.

Si vous ne souhaitez pas forcer une valeur, n'utilisez pas de champ. React-final-form maintient l'état pour que vous n'ayez pas à le faire.

Pour définir une valeur initiale, utilisez la propriété initialValues ​​dans le contrôle Form.

 <Form
      onSubmit={onSubmit}
      initialValues={{ field1: "2019-02-02" }}
      render={({ handleSubmit, form, submitting, pristine, values }) => (
        <form onSubmit={handleSubmit}>
          <div>
            <label>Feild One</label>
            <Field name="field1" component="input" type="date" />
          </div>
          .
          .
          .

Edit ???? React Final Form - Simple Example

3
Mke Spa Guy

Voulez-vous dire que vous avez déjà un composant de sélection de date que vous souhaitez que react-final-form puisse accéder à l'état de ce composant? Si tel est le cas, avez-vous envisagé d'utiliser la version render-props du composant Field?

Dans votre formulaire, cela ressemblerait à ceci:

<Field name="datePickerField">
  {({ input }) => (
    <DatePickerComponent
      onChange={date => input.onChange(date)}
    />
  )}
</Field>

puis à l'intérieur du DatePickerComponent - où vous gérez le réglage de l'état pour la date sélectionnée, vous appelleriez également props.onChange(date).

0
S. Taylor