Menu
I am trying to call a function when a user clicks a div (using onClick in react). I don't need to pass any arguments at this moment, just need to call the function. I'm fairly new to react.js so apologies in advance for my ignorance. Thanks.
var Test = React.createClass({ btnTapped: function(){ console.log('tapped!'); }, render: function() { var stationComponents = this.props.stations.map(function(station, index) { return <div onClick={btnTapped()}><img src="img/test.png" />{station}</div>; }); return <div>{stationComponents}</div>; } }); var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw","bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"]; ReactDOM.render(<Test stations={cards} />, document.getElementById('test-div')); 
226
To pass an event and parameter onClick in React:Pass an inline function to the onClick prop of the element. The function should take the event object and call handleClick . Pass the event and parameter to handleClick .
The React onClick event handler enables you to call a function and trigger an action when a user clicks an element, such as a button, in your app. Event names are written in camelCase, so the onclick event is written as onClick in a React app. In addition, React event handlers appear inside curly braces.
onclick is not a function" error occurs, because there is no onclick() function in jQuery. To solve the error, use the click function instead, e.g. $('#btn'). click(function () {} . Copied!
If your build system has support for babel, Use ES6 arrow functions in your react code.
If you are using ES6 class for creating components, use method binding at the constructor level to avoid binding at every render call and also provide a key to the div tag inside the map function.
class Test extends React.Component { constructor(props) { super(props); this.btnTapped = this .btnTapped .bind(this); } btnTapped() { console.log('tapped'); } render() { return ( <div> {this .props .stations .map((station, index) => { return <div key={index} onClick={this.btnTapped}>{station}</div> }) } </div> ) } } var cards = ["amazon", "aeo", "aerie", "barnes", "bloomingdales", "bbw", "bestbuy", "regal", "cvs", "ebay", "gyft", "itunes", "jcp", "panera", "staples", "walmart", "target", "sephora", "walgreens", "starbucks"]; ReactDOM.render( <Test stations={cards}/>, document.getElementById('test-div'));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <body> <div id="test-div"></div> </body>You should set a function to onClick attribute, not call it. Should be: onClick={this.btnTapped} instead of onClick={btnTapped()}.
Also, it is possible to do like this:
<div onClick={function(e) { this.btnTapped(); //can pass arguments this.btnTapped(foo, bar); }} > It's usually used when you need to pass an argument to your function.
Also, to be able to get component's context from the external function, you should use bind(this) method. Like: onClick={btnTapped.bind(this)}
And since you are using a scope function for mapping array, new context is created inside of: this.props.stations.map(function(station, index){}. And this is overridden. Just use an arrow function instead:
var stationComponents = this.props.stations.map((station, index) => { return <div onClick={this.btnTapped}><img src="img/test.png" />{station}</div>; }); 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
