如何将事件处理程序传递给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)}/>

我也尝试过删除arrow函数，这只会导致该函数在加载组件时执行：

// 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来制作必需的道具。

作为示例，我添加了一个小片段来显示其工作方式

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调用或商店时，它只能等待结果，然后根据响应重定向用户