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

Question

我在React中创建了一个 组件，用于抽象出应用程序中的一些样式。我在两个不同的上下文中使用它 - 一个是用于提交登录表单，另一个是用于导航到注册页面（以及未来可能的其他上下文）。

我正在尝试找出如何从父组件传递事件处理程序到

。我想为登录表单调用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)}/>

- bgmaster

---

只需要 {this.register}，在该注册方法中获取用户状态即可（无需作为参数传递）。 - Icepickle

你能详细说明一下吗？我也无法让onClick事件处理程序与其他组件配合使用。 - bgmaster

finalfreq已经给出了一个很好的例子。为了更详细地说明，看一下父组件是如何实现的会很方便。在他的情况下，您将事件处理程序作为属性传递给子组件，然后子组件调用父控件上的函数。 - Icepickle

Answer 1

通常，您可以将 onClick 处理程序作为属性传递给按钮类，并将其转发到该类。您可以通过定义 button 组件的 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调用或存储，则可以等待结果，然后根据响应重定向用户。

- Icepickle

---

你关于提交方法的评论让我想起它们通常是用于表单而不是按钮。我最终为表单创建了一个更“语法正确”的input type="submit"组件，然后将Button组件留给仅在“click”事件上触发的操作管理。我将onSubmit事件处理程序留在表单上，而不是将其传递给子组件。 - bgmaster

Answer 2

我们处理这个问题的方法是，我们有一个按钮组件，它呈现一个a标签，然后我们有一个href属性和一个onClick属性可以传递。如果它是一个链接，只需将href属性传递给按钮，如果您想要执行一个函数，只需将其传递给onClick属性，并确保它在a标签上设置。

在按钮组件中，我们还设置了一个自定义的onClick函数，它看起来像这样：

_onClick: function(e) {
  if (!this.props.onClick) {
    return; 
  }
  this.props.onClick(e);
}

然后在a标签上。

<a href={this.props.href} onClick={this._onClick} />

- finalfreq