如何在React中将事件处理程序传递给子组件 [英] How to pass an event handler to a child component in React
问题描述
我在React中创建了一个< Button />
组件,它抽象出了我的应用程序中的一些样式。我在两个不同的上下文中使用它 - 一个用于提交登录表单,另一个用于导航到注册页面(以及将来可能的其他上下文)。
I have a <Button />
component I've created in React that abstracts out some of the styling in my application. I am using it in two different contexts - one to submit a login form, and the other to navigate to the registration page (and probably other contexts in the future).
我试图弄清楚如何将事件处理程序从父组件传递到< Button />
。我想为登录表单调用 onSubmit
处理程序,但是导航按钮的 onClick
处理程序。这可能吗?
I am trying to figure out how to pass the event handlers from the parent component to the <Button />
. I want to call an onSubmit
handler for the login form, but an onClick
handler for the navigation button. Is this possible?
我试过这样调用这个组件:
I have tried calling the component like this:
<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)}/>
我也尝试删除箭头功能,这只会导致函数在组件运行时执行已加载:
I've also tried removing the arrow function, which just causes the functions to execute when the component is loaded:
// 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)}/>
推荐答案
通常,您可以将onClick处理程序转发给您按钮类通过将其作为属性传递。你可以通过简单地定义你的按钮组件的propTypes来制作一个必需的道具。
In general, you can forward the onClick handler to your button class by passing it as a property. You could this make a required prop by simply defining the propTypes for your button component.
作为一个例子,我添加了一个小片段,展示了它是如何工作的
As an example, I added a small snippet that shows how it works
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调用或商店,它可以等待结果,然后根据响应重定向用户
Also, you wouldn't in general use the submit method of a button, you would rather send the data received to a webservice, and handle any changes when the result is received. The submit kills the current website and needs to load everything anew, while with an ajax call, or a store, it can just wait for the result and then redirect the user based on the response
这篇关于如何在React中将事件处理程序传递给子组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!