web-dev-qa-db-ja.com

外部ユーザーアクションからフィールド値を設定/変更する方法????React最終フォーム

ユーザーを支援するためにフォーム内の特定のフィールドの値を設定したい場合があります多くの状況があります。

たとえば、オンラインフルーツストアでは、ユーザーが購入したいリンゴの数を尋ねる場合があります。ユーザーを支援するために、次のような3つのボタンがあります。

  • 「minimum」-フィールド値を、ストアが適切に販売できる最小数量に設定します
  • 「maximum」-同上、ただし最大
  • 「前回購入したもの」-フィールド値を、ユーザーが前回購入したリンゴの数量に設定します

最も関連性の高い2つの例（ 値の読み込みと初期化 と 計算フィールド ）を検討した後、あまりにもハッキングせずにこれを理解することはできません。

どうすればフィールドの値を設定からユーザーのアクション（ボタンをクリックするなど）にできますか？

reactjsreact-final-formfinal-form
17
aryzing

Erikには素晴らしい ミューテーターに関する投稿 があり、私が探していた解決策を見つけるきっかけになりました。

<Form
  mutators={{
    setMin: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 1)
    },
    setMax: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 100)
    },
    setLast: (args, state, utils) => {
      utils.changeValue(state, 'apples', () => 6)
    },
  }}

  render={({ mutators, ...rest }) => (
    <>
      <button onClick={mutators.setMin}>minimum apples</button>
      <button onClick={mutators.setMax}>maximum apples</button>
      <button onClick={mutators.setLast}>what I bought last time</button>
    </>
  )}
/>
25
aryzing

受け入れられた答えは素晴らしく、私の解決策に私を導きましたが、 Reactアプリケーションの外部からフィールド値を変更する方法を探していたように誰かがここに来た場合、任意のフィールドを任意の値に設定する完全に汎用的なミューテーターを作成し、次のような形式でバインドされたミューテーターへのグローバル参照を取得することでそれを行うことができます

<Form
  mutators={{
    // expect (field, value) args from the mutator
    setValue: ([field, value], state, { changeValue }) => {
      changeValue(state, field, () => value)
    }
  }}
  render={({ mutators, ...rest }) => {
    // put the reference on a window variable of your choice here
    if (!window.setFormValue) window.setFormValue = mutators.setValue

    return (
      <>
        <Field name="field1">...</Field>
        <Field name="field2">...</Field>
        ...
      </>
    )
  }}
/>

// somewhere else, outside of the React application

window.setFormValue('field1', 'value1')
window.setFormValue('field2', 'value2')

免責事項：上記のパターンは、非常に特定のユースケースで、絶対に必要でない限り使用しないでください。たとえば、Reactアプリの外部にあるmustのコードからのフィールドの入力を自動化するために使用しています。実際のアプリケーションコードに対してこれを行うべきではありません。しかし、あなたがそれをする必要がある場合、それは素晴らしい作品です！

8
davnicwil