web-dev-qa-db-fra.com

Comment écouter onChange du composant Field dans React-Final-Form?

Redux-form Le composant "Field" fournit propriété onChange . Un rappel qui sera appelé chaque fois qu'un événement onChange est déclenché à partir de l'entrée sous-jacente. Ce rappel permet d'obtenir "newValue" et "previousValue" pour le champ.

React-final-form Le composant "Field" n'a pas cette propriété.

Alors, comment puis-je obtenir les mêmes fonctionnalités?

javascriptreactjsreact-final-form
5
Maksim Boltik

L'idée sous détection de changement est de s'abonner aux changements de valeur de Field et d'appeler votre gestionnaire onChange personnalisé lorsque la valeur change réellement. J'ai préparé exemple simplifié où vous pouvez le voir en action. Les détails sont dans MyField.js fichier.

En conséquence, vous pouvez l'utiliser comme avec redux-form:

<MyField 
  component="input"
  name="firstName"
  onChange={(val, prevVal) => console.log(val, prevVal)}
/>
4
likerRr

Je n'ai pas utilisé redux-form, mais j'ai ajouté un wrapper super simple autour du composant Field pour écouter onChange comme ceci:

const Input = props => {

    const {
        name, 
        validate, 
        onChange,
        ...rest
    } = props;

    return (
        <Field name={name} validate={validate}>
            {({input, meta}) => {
                return (
                    <input 
                        {...input}
                        {...rest}
                        onChange={(e) => {
                            input.onChange(e); //final-form's onChange
                            if (onChange) { //props.onChange
                                onChange(e);
                            }
                        }}
                    />
            )}}
        </Field>
    );
};
5
orszaczky

React-final-form gère cette fonctionnalité avec un petit package externe.

Fondamentalement, c'est un composant supplémentaire à ajouter à l'intérieur du formulaire qui se lie à l'élément en utilisant son nom:

<Field name="foo" component="input" type="checkbox" />
<OnChange name="foo">
  {(value, previous) => {
    // do something
  }}
</OnChange>

La documentation actuelle se trouve ici:

https://github.com/final-form/react-final-form-listeners#onchange

2
Francesco Meli

Vous devez utiliser le composant ExternalModificationDetector pour écouter les modifications sur le composant champ comme ceci:

    <ExternalModificationDetector name="abc">
      {externallyModified => (
        <BooleanDecay value={externallyModified} delay={1000}>
          {highlight => (
            <Field
                //field properties here
            />
          )}
        </BooleanDecay>
      )}
    </ExternalModificationDetector>

En encapsulant un composant ExternalModificationDetector avec état dans un composant Field, nous pouvons écouter les modifications apportées à la valeur d'un champ, et en sachant si le champ est actif, déduire lorsque la valeur d'un champ change en raison de influences extérieures.

Via - React-Final-FormGithub Docs

Voici un exemple de sandbox fourni dans le React-Final-Form Docs: https: // codesandbox.io/s/3x989zl866

1
AndrewL64

On pourrait utiliser l'attribut parse du champ et fournir une fonction qui fait ce dont vous avez besoin avec la valeur:

<Field
  parse={value => {
    // Do what you want with `value`
    return value;
  }}
  // ...
/>
0
robsco