web-dev-qa-db-ja.com

Reduxフォーム：複数のボタンを処理する方法？

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

両方のボタンは、データを保存するアクションを送出する必要がありますが、押されたボタンに応じて、ユーザーは別のページにルーティングされます。

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

しかし、私が見る限り、dataの形式のみがこのハンドラーに渡されます。

handleSubmit に関するドキュメント注：

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

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

reactjsreduxredux-form
20
arie

これには多くの方法がありますが、どのボタンが押されたかに応じてボタンデータを追加することも含まれます。これがインラインバージョンです。

_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()を呼び出す関数を与えます。

36
Erik R.

@mibbit onSubmitは、ユーザーが定義する関数です（少なくともこれは、ドキュメントが言うとおりです onSubmitメソッドを見てください ）。これは、@ Erik Rの例に続くredux-form 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)
1
maxi-code