Redux窗体：如何处理多个按钮？

我想添加第二个提交按钮到redux-form。Redux窗体：如何处理多个按钮？

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

所以我定义了一个处理程序，我把onSubmit prop传递给窗体。

但据我看到的只是形式数据传递给该处理程序：

该文档上handleSubmit注：

意味着要传递的一种功能<form onSubmit={handleSubmit}> 或<button onClick={handleSubmit}>。它将运行同步和异步验证，如果表单有效，它将调用this.props.onSubmit(data)表单数据的内容。

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

来源

2016-05-11 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()。

来源

2016-05-11 21:47:23

非常感谢！对于不同的道具和处理程序之间的相互作用，我有点困惑，但是你的解决方案是完全合理的。 – arie

嘿艾瑞克，首先感谢'redux-form' :)。其次，它确实有效，但感觉有点像一个隐藏的价值领域。例如，我工作在一个通用表单上，也许有人会使用一个名为'pill'的属性。我真的想以某种方式绑定该函数，并将其作为另一个参数传递。 – leonprou

不幸的是，因为

@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)

来源

2017-11-05 05:00:11

Redux窗体：如何处理多个按钮？

回答

相关问题