通常,您可以通过将onClick处理程序作为属性传递给按钮类。您可以通过简单地为按钮组件定义propTypes来制作必需的道具。
作为示例,我添加了一个小片段来显示其工作方式
var StyledButton = React.createClass({ propTypes: { // the StyledButton requires a clickHandler clickHandler: React.PropTypes.func.Required, // and I guess the text can be seen as required as well text: React.PropTypes.string.required }, render: function() { // as you are sure you have a clickHandler, you can just reference it directly from the props return <button type="button" onClick={this.props.clickHandler}>{this.props.text}</button>; }});var MyForm = React.createClass({ getInitialState() { return { clicked: 0 }; }, click() { this.setState({clicked: this.state.clicked+1}); alert('ouch'); }, secondClickHandler() { this.setState({clicked: 0}); alert(':('); }, render() { // your parent component simply sets which button return <fieldset> <div> <StyledButton clickHandler={this.click} text="Click me" /> { (this.state.clicked > 0) && <StyledButton clickHandler={this.secondClickHandler} text="Not again" /> } </div> </fieldset>; }});ReactDOM.render( <MyForm />, document.getElementById('container'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script><div id="container"> <!-- This element's contents will be replaced with your component. --></div>另外,通常不使用按钮的Submit方法,而是将接收到的数据发送到Web服务,并在接收到结果时处理所有更改。提交会杀死当前网站,并需要重新加载所有内容,而使用ajax调用或商店时,它只能等待结果,然后根据响应重定向用户



