web-dev-qa-db-ja.com

React-Final-FormのFieldコンポーネントのonChangeを聞く方法は？

Redux-form 「フィールド」コンポーネントは onChangeプロパティ を提供します。基礎となる入力からonChangeイベントが発生するたびに呼び出されるコールバック。このコールバックにより、フィールドの「newValue」および「previousValue」を取得できます。

React-final-form 「フィールド」コンポーネントにはこのプロパティがありません。

それで、どのようにして同じ機能を得ることができますか？

javascriptreactjsreact-final-form
5
Maksim Boltik

変更検出中のアイデアは、Fieldの値の変更をサブスクライブし、値が実際に変更されたときにカスタムonChangeハンドラーを呼び出すことです。 簡単な例 を準備しました。詳細はMyField.jsファイルにあります。

その結果、redux-formと同じように使用できます。

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

私はredux-formを使用していませんが、次のようにonChangeをリッスンするために、Fieldコンポーネントの周りに非常にシンプルなラッパーを追加しました。

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は、この機能を小さな外部パッケージで処理します。

基本的に、名前を使用して要素にバインドするフォーム内に追加する追加コンポーネントです。

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

現在のドキュメントはここにあります：

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

2
Francesco Meli

ExternalModificationDetectorコンポーネントを使用して、次のようにフィールドコンポーネントの変更をリッスンする必要があります。

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

ステートフルExternalModificationDetectorコンポーネントをFieldコンポーネントにラップすることにより、フィールドの値への変更をリッスンし、フィールドがアクティブかどうかを知ることにより、フィールドの値が外部の影響。

経由-React-Final-FormGithub Docs

sandboxの例は、React-Final-Formドキュメントで提供されています： https ：//codesandbox.io/s/3x989zl866

2
AndrewL64

フィールドのparse属性を使用して、値で必要なことを行う関数を提供できます。

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