web-dev-qa-db-fra.com

Effacer la valeur d'un champ lors de la saisie effacer sous forme de réaction finale

J'utilise un composant personnalisé avec react-final-form. Lors d'un changement d'entrée, il définit la valeur dans le champ address. Mais lorsque l'entrée est effacée, elle ne met pas à jour la valeur du champ. J'essaie donc de le faire avec des mutateurs de forme.

J'ai déjà ajouté un mutateur pour effacer le champ:

mutators={{
  clear: ([address], state, { changeValue }) => {
    changeValue(state, "address", () => undefined);
  }
}}

J'ai essayé de l'ajouter à ma fonction onChange personnalisée, mais cela ne fonctionne pas.

onChange={event =>
  props.input.onChange !== undefined
    ? props.input.onChange({ value: event })
    : form.mutators.clear
}

Ou peut-être que cela peut se faire sans mutateurs? J'apprécierais vraiment votre aide. Voici un exemple en direct (l'effacement du champ ne fonctionne que sur le bouton, cliquez sur onClick={form.mutators.clear}).

reactjsreact-final-form
3
jupiteror

Tous les rappels par défaut sont gérés par le composant. Si vous voulez effacer un clic de bouton, vous pouvez créer un composant personnalisé et utiliser des méthodes de rappel natives.

onChange = (event) => {
  this.setState({
    address:event.target.value
  });
}

onClear = () => {
  this.setState({
    address:''
  });
}
<div>
  <Field name="address">
      <div>
        <input
          value={this.state.address}
          onChange={this.onChange}
        />
      </div>
  </Field>
  <button onClick={this.onClear}>Clear</button>
</div>
1
Sachin

Le problème n'est pas avec le formulaire react-final-dans votre code, il est dû aux données react-da, j'ai beaucoup joué autour de votre code en 1 jour, et la réinitialisation vérifiée fonctionne très bien avec le react-final- forme

Mettez simplement à jour votre rendu avec ce code et voyez que la réinitialisation fonctionne parfaitement. Ouais! le problème vient des données de react da. Je ne suis pas sûr de ce qu'il fait en raison de moins d'informations officielles sur ce package.

 <div className="App">
      <h2>Dadata test</h2>
      <Form
        mutators={{
          clear: ([address], state, { changeValue }) => {
            changeValue(state, "address", () => undefined);
          }
        }}
        onSubmit={onSubmit}
        render={({ form, handleSubmit, pristine, invalid, values, errors }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Field name="address" component="input" />
              {/* {props => (
                <div>
                  <ReactDadata
                    token="d19c6d0b94e64b21d8168f9659f64f7b8c1acd1f"
                    onChange={event =>
                      props.input.onChange !== undefined
                        ? props.input.onChange({ value: event })
                        : form.mutators.clear
                    }
                  />
                </div>
              )}
            </Field> */}
            <button type="submit" disabled={invalid}>
              Submit
            </button>
            <button type="button" onClick={form.reset}>
              Clear
            </button>
            <Fields names={["address"]}>
              {fieldsState => (
                <pre>{JSON.stringify(fieldsState, undefined, 2)}</pre>
              )}
            </Fields>
          </form>
        )}
      />
    </div>

J'espère que cela vous aidera à résoudre le problème.

0
Shraddha Goel