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

小编典典

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

reactjs

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

这两个按钮都应调度一个保存数据的操作，但是应根据所按下的按钮将用户路由到其他页面。

因此，我定义了一个处理程序，该处理程序作为onSubmitprop 传递给表单。

但据我所知，只有表单数据传递给此处理程序：

handleSubmit注意的文档：

传递给<form onSubmit={handleSubmit}> 或传递给的函数<button onClick={handleSubmit}>。它将运行同步和异步验证，并且，如果表单有效，它将this.props.onSubmit(data)使用表单数据的内容进行调用。

我所缺少的是一种还将有关按下按钮的信息（例如click事件）传递给onSubmit处理程序的方法，这样我就可以按预期进行保存和路由。

阅读 204

2020-07-22

共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()。

2020-07-22