React JS onClick event handler
Why not:
onItemClick: function (event) { event.currentTarget.style.backgroundColor = '#ccc';},render: function() { return ( <div> <ul> <li onClick={this.onItemClick}>Component 1</li> </ul> </div> );}
And if you want to be more React-ive about it, you might want to set the selected item as state of its containing React component, then reference that state to determine the item's color within render
:
onItemClick: function (event) { this.setState({ selectedItem: event.currentTarget.dataset.id }); //where 'id' = whatever suffix you give the data-* li attribute},render: function() { return ( <div> <ul> <li onClick={this.onItemClick} data-id="1" className={this.state.selectedItem == 1 ? "on" : "off"}>Component 1</li> <li onClick={this.onItemClick} data-id="2" className={this.state.selectedItem == 2 ? "on" : "off"}>Component 2</li> <li onClick={this.onItemClick} data-id="3" className={this.state.selectedItem == 3 ? "on" : "off"}>Component 3</li> </ul> </div> );},
You'd want to put those <li>
s into a loop, and you need to make the li.on
and li.off
styles set your background-color
.
Two ways I can think of are
var TestApp = React.createClass({ getComponent: function(index) { $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({ 'background-color': '#ccc' }); }, render: function() { return ( <div> <ul> <li onClick={this.getComponent.bind(this, 1)}>Component 1</li> <li onClick={this.getComponent.bind(this, 2)}>Component 2</li> <li onClick={this.getComponent.bind(this, 3)}>Component 3</li> </ul> </div> ); }});React.renderComponent(<TestApp /> , document.getElementById('soln1'));
This is my personal favorite.
var ListItem = React.createClass({ getInitialState: function() { return { isSelected: false }; }, handleClick: function() { this.setState({ isSelected: true }) }, render: function() { var isSelected = this.state.isSelected; var style = { 'background-color': '' }; if (isSelected) { style = { 'background-color': '#ccc' }; } return ( <li onClick={this.handleClick} style={style}>{this.props.content}</li> ); }});var TestApp2 = React.createClass({ getComponent: function(index) { $(this.getDOMNode()).find('li:nth-child(' + index + ')').css({ 'background-color': '#ccc' }); }, render: function() { return ( <div> <ul> <ListItem content="Component 1" /> <ListItem content="Component 2" /> <ListItem content="Component 3" /> </ul> </div> ); }});React.renderComponent(<TestApp2 /> , document.getElementById('soln2'));
Here is a DEMO
I hope this helps.
Here is how you define a react onClick event handler, which was answering the question title... using es6 syntax
import React, { Component } from 'react';export default class Test extends Component { handleClick(e) { e.preventDefault() console.log(e.target) } render() { return ( <a href='#' onClick={e => this.handleClick(e)}>click me</a> ) }}