How to pass an event handler to a child component in React

Question

I have a <Button /> component that I created in React that abstracts some styles in my application. I use it in two different contexts: one to submit the login form, and the other to go to the registration page (and, possibly, in other contexts in the future).

I am trying to figure out how to pass event handlers from the parent component to <Button /> . I want to call the onSubmit handler for the login form, but the onClick handler for the navigation button. Is it possible?

I tried calling the component as follows:

 <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 also tried to remove the function with the arrow, which simply forces the function to execute when the component loads:

 // 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

In general, you can redirect the onClick handler to your button class by passing it as a property. You can create the necessary support by simply specifying 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 contents will be replaced with your component. --> </div> 

In addition, you would not use the button submit method at all, you would rather send the received data to the web service and process any changes when receiving the result. The view kills the current website and requires loading everything all over again, and when calling ajax or in the repository, it can just wait for the result, and then redirect the user based on the response

Answer 2

How we handle this, we have a button component that displays the tag, and then we have href support and onClick support that you can pass. If its link is simply passed to the href prop to the button, and if you want it to execute the function, you just passed it to onClick support and made sure that it is installed in the tag.

In the Button component, we also configure a custom onClick function, which looks like this:

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

and then on the tag

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