Reduxフォーム：複数のボタンを扱う方法は？

Question

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

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

私はフォームにonSubmit propと渡すハンドラを定義しました。

しかし、これまで私がデータがはこのハンドラに渡されたフォームのみ見ることができるように：

<form onSubmit={handleSubmit}> かに渡されることを意図機能：handleSubmitノートに

ドキュメントを<button onClick={handleSubmit}>。 これは、同期と非同期の両方の検証を実行し、フォームが有効な場合は フォームデータの内容でthis.props.onSubmit(data)を呼び出します。私が行方不明です何

は、意図したとおり、私は保存し、ルートできるように、また、私のonSubmitハンドラに押されたボタン（例えばクリックイベント）に関する情報を渡す方法です。

Answer 1

これを行うには多くの方法がありますが、いずれのボタンが押されたかに応じてボタンデータを追加します。ここにインラインバージョンがあります。

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()と呼ぶ関数を与えます。

Answer 2

@mibbit onSubmitは、あなたが定義する関数です（少なくともこれはドキュメントの内容です：look the onSubmit method）。これは、@Erik Rの例に従う、redux形式の7.x用です。

class Morpheus extends Component { 
    constructor(props) { 
     super(props); 

     this.state = {}; 
     this.onSubmit = this.onSubmit.bind(this); 
    } 

    onSubmit(values, pill) { 
     // do magic here 
    } 

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

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