Menu
I recently started working with ReactJS. Specifically, I am utilizing the react-rails ruby gem and react-bootstrap components.
I have a question regarding placing onClick event listeners in child components.
As you can see from the code sample below, I have a parent component that 'calls' a child component in its render function. Within that render function, I have React onClick listener that calls handleToggle when it is clicked.
###* @jsx React.DOM ### ToggleIconButton = React.createClass getInitialState: -> toggleOn: false handleToggle: (evt) -> this.setState(toggleOn: !this.state.toggleOn) render: -> `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>` IconButton = React.createClass render: -> # BsButton and BsGlyphicon are React-Bootstrap components `<BsButton> <BsGlyphicon glyph={this.props.glyph} /> {" " + this.props.text} </BsButton>` Unfortunately, this doesn't work the way I thought it would. ToggleIconButton::handleToggle never gets called. Instead, the onClick listener is placed on IconButton and references ToggleIconButton::handleToggle.
I don't want to add any additional behavior to IconButton. The way I see it, no conditional logic should be placed in IconButton. All it should do is represent an icon and button and not have to worry about any browser events. That's what ToggleIconButton is for.
While I know I could wrap a React Div around IconButton and write an onClick listener there (I've tried this and it works), it seems like that's a bit janky.
Does anybody know a good way of doing this? Thanks guys!
528
To pass an onChange event handler to a child component in React: Define the event handler function in the parent component. Pass it as a prop to the child component, e.g. <Child handleChange={handleChange} /> . Set it to the onChange prop on the input field in the child.
To add the click event in React using plain JavaScript, you need to use addEventListener() to assign the click event to an element. Create one <button> element as ref props so that it can be accessed to trigger the click event.
To pass data from child to parent component in React:Pass a function as a prop to the Child component. Call the function in the Child component and pass the data as arguments. Access the data in the function in the Parent .
So, the proper way to handle eventing in this case would be to pass the event handler down to the child component. There are a few ways to accomplish what you want, and I might implement this behavior differently (not sure what the use case is), but I wired up an example in JSX for you that demonstrates the typical event handling between Parent and Child Components. You can find it here...
JS Fiddle
Just think of it like this:
var ParentComponent = React.createClass({ render: function(){ return ( <ChildComponent onSomeEvent={this.handleThatEvent} />; ) }, handleThatEvent: function(e){ //update state, etc. } }); var ChildComponent = React.createClass({ render: function(){ return ( <input type="button" onClick={this.props.onSomeEvent} value="Click Me!" /> ) } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
