如何在React中将事件处理程序传递给子组件

Question

我有一个<Button />我在React中创建的组件,它在我的应用程序中抽象出一些样式.我在两个不同的上下文中使用它 - 一个用于提交登录表单,另一个用于导航到注册页面(以及将来可能的其他上下文).

我试图弄清楚如何将事件处理程序从父组件传递给<Button />.我想调用onSubmit登录表单的onClick处理程序,但是导航按钮的处理程序.这可能吗？

我试过像这样调用组件:

<Button text={callToAction} style={styles.callToActionButton} onClick={() => FlowRouter.go("Auth")}/>

<Button text="Go!" style={styles.registerButton} onSubmit={() => this.register(this.state.user, this.state.password)}/>

我也尝试删除箭头函数,这只会导致函数在加载组件时执行:

// executes event handlers on page load
<Button text={callToAction} style={styles.callToActionButton} onClick={FlowRouter.go("Auth")}/>

<Button text="Go!" style={styles.registerButton} onSubmit={this.register(this.state.user, this.state.password)}/>

Answer 1

通常,您可以将onClick处理程序作为属性传递给您的按钮类.您可以通过简单地定义按钮组件的propTypes来创建所需的prop.

作为一个例子,我添加了一个小片段,显示它是如何工作的

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>

此外,您通常不会使用按钮的提交方法,而是希望将收到的数据发送到Web服务,并在收到结果时处理任何更改.提交会杀死当前网站并需要重新加载所有内容,而使用ajax调用或商店时,它可以等待结果,然后根据响应重定向用户