web-dev-qa-db-ja.com

react-final-formの入力クリアでフィールドの値をクリアする

react-final-formでカスタムコンポーネントを使用しています。入力が変更されると、addressフィールドに値が設定されます。ただし、入力がクリアされても、フィールドの値は更新されません。だから私はフォームミューテーターでそれをやろうとしている。

私はすでにフィールドをクリアするためのミューテーターを追加しました：

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

カスタムのonChange関数に追加しようとしましたが、機能しません。

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

それともミューテーターなしでこれを行うことができますか？よろしくお願いします。以下は ライブの例 です（フィールドをクリアすると、ボタンクリックでのみonClick={form.mutators.clear}として機能します）。

reactjsreact-final-form
3
jupiteror

すべてのデフォルトのコールバックはコンポーネントによって処理されます。ボタンクリックでクリアを実行する場合は、カスタムコンポーネントを作成し、ネイティブコールバックメソッドを使用して実行できます。

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

問題はあなたのコードのreact-final-formにありません、それはreact-daデータによるものです、私は1日以内にあなたのコードの周りでたくさん遊んで、チェックされたリセットはreact-final-でうまく動作しています形

このコードを使用してレンダリングを更新し、リセットが完全に機能することを確認してください。うん！問題はデータの反応です。このパッケージの公式情報が少ないため、どうなるかわかりません。

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

それが問題の解決に役立つことを願っています。

0
Shraddha Goel