Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReactJS: onClick handler not firing when placed on a child component

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.

React Dev Tool Screen


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!

like image 528
Kurt Mueller Avatar asked Jun 08 '14 04:06

Kurt Mueller


People also ask

How do I get onClick to child component?

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.

How do you trigger onClick event in react JS?

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.

How do you pass Click event from child to parent in React?

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 .


1 Answers

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!" />         )     } }); 
like image 121
captray Avatar answered Sep 27 '22 02:09

captray