reactjs - Redux表格: How to handle multiple buttons?

Question

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

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

所以我定义了一个处理程序，并将其传递为 onSubmit支持表单。

但据我所知，只有表单数据传递给了这个处理程序:

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() 的函数。