20

redux-formに 2 番目の送信ボタンを追加しようとしています。

どちらのボタンも、データを保存するアクションをディスパッチする必要がありますが、押されたボタンに応じて、ユーザーは別のページにルーティングされる必要があります。

onSubmitそこで、 propとしてフォームに渡すハンドラーを定義しました。

しかし、私が見ることができる限り、フォームデータのみがこのハンドラーに渡されます。

handleSubmitノート上のドキュメント:

<form onSubmit={handleSubmit}> または に渡されることを意図した関数<button onClick={handleSubmit}>。同期と非同期の両方の検証を実行し、フォームが有効な場合はthis.props.onSubmit(data)、フォーム データの内容で呼び出します。

私が見逃しているのは、押されたボタンに関する情報 (クリック イベントなど) を onSubmit ハンドラーに渡す方法です。これにより、意図したとおりに保存してルーティングできます。

4

2 に答える 2

44

これを行うには多くの方法がありますが、どのボタンが押されたかに応じてボタン データを追加する必要があります。インライン版はこちら。

class Morpheus extends Component {
  render() {
    const { handleSubmit } = this.props;
    return (
      <div>
        Fields go here
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'blue'
          }))}>Blue Pill</button>
        <button onClick={handleSubmit(values => 
          this.props.onSubmit({ 
            ...values,
            pill: 'red'
          }))}>Red Pill</button>
      </div>
    );
  }
}

export default reduxForm({
  form: 'morpheus'
})(Morpheus)

はhandleSubmitすべての検証チェックなどを処理し、すべてが有効な場合は、フォームの値を使用して指定された関数を呼び出します。そこで、追加情報を追加して を呼び出す関数を与えますonSubmit()。

于 2016-05-11T21:47:23.070 に答える