Redux 表单：如何处理多个按钮？

Question

我正在尝试向 redux-form 添加第二个提交按钮。

两个按钮都应该发送一个保存数据的动作，但是根据按下的按钮，用户应该被路由到不同的页面。

所以我定义了一个处理程序，作为 onSubmit 属性传递给表单。

但据我所知，只有 data 形式传递给了这个处理程序：

handleSubmit 上的文档注意：

A function meant to be passed to <form onSubmit={handleSubmit}> or to <button onClick={handleSubmit}>. It will run validation, both sync and async, and, if the form is valid, it will call this.props.onSubmit(data) with the contents of the form 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）。这是用于 redux-form 7.x 下面的 @Erik R.

示例

    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)

Redux 表单：如何处理多个按钮？

Redux Form: How to handle multiple buttons?

reactjs

redux

redux-form