React JS onClick事件处理程序

我有

var TestApp = React.createClass({ getComponent: function(){ console.log(this.props); }, render: function(){ return( <div> <ul> <li onClick={this.getComponent}>Component 1</li> </ul> </div> ); } }); React.renderComponent(<TestApp />, document.body); 

我想为单击列表元素的背景着色。 我如何在React中做到这一点？

就像是

 $('li').on('click', function(){ $(this).css({'background-color': '#ccc'}); }); 

Answer 1

我能想到的两种方法是

 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')); 

这是我个人的最爱。

 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')); 

这是一个DEMO

我希望这有帮助。

Answer 2

为什么不只是：

 onItemClick: function (event) { event.currentTarget.style.backgroundColor = '#ccc'; }, render: function() { return ( <div> <ul> <li onClick={this.onItemClick}>Component 1</li> </ul> </div> ); } 

如果你想对它做更多的反应，你可能需要将选中的项目设置为包含React组件的状态，然后引用该状态来确定项目在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> ); }, 

当然，你要把这些<li>放到一个循环中，你需要让li.on和li.off样式设置你的background-color 。

Answer 3

这里是你如何定义一个反应onClick事件处理程序 ，它正在回答问题标题…使用es6语法

 import React, { Component } from 'react'; export default class Test extends Component { handleClick(event) { event.preventDefault() var el = event.target console.log(el) } render() { return ( <a href='#' onClick={this.handleClick.bind(this)}>click me</a> ) } } 

Answer 4

使用ECMA2015。 箭头function使“这个”更加直观。

 import React from 'react'; class TestApp extends React.Component { getComponent(e, index) { $(e.target).css({ 'background-color': '#ccc' }); } render() { return ( <div> <ul> <li onClick={(e) => this.getComponent(e, 1)}>Component 1</li> <li onClick={(e) => this.getComponent(e, 2)}>Component 2</li> <li onClick={(e) => this.getComponent(e, 3)}>Component 3</li> </ul> </div> ); } }); React.renderComponent(<TestApp /> , document.getElementById('soln1'));` 

Answer 5

如果您使用的是ES6，下面是一些简单的示例代码：

 import React from 'wherever_react_is'; class TestApp extends React.Component { getComponent(event) { console.log('li item clicked!'); event.currentTarget.style.backgroundColor = '#ccc'; } render() { return( <div> <ul> <li onClick={this.getComponent.bind(this)}>Component 1</li> </ul> </div> ); } } export default TestApp; 

在ES6类体中，函数不再需要“函数”关键字，而且不需要用逗号分隔。 如果你愿意的话，你也可以使用=>语法。

这是一个dynamic创build元素的例子：

 import React from 'wherever_react_is'; class TestApp extends React.Component { constructor(props) { super(props); this.state = { data: [ {name: 'Name 1', id: 123}, {name: 'Name 2', id: 456} ] } } getComponent(event) { console.log('li item clicked!'); event.currentTarget.style.backgroundColor = '#ccc'; } render() { <div> <ul> {this.state.data.map(d => { return( <li key={d.id} onClick={this.getComponent.bind(this)}>{d.name}</li> )} )} </ul> </div> ); } } export default TestApp; 

请注意，每个dynamic创build的元素都应该有一个唯一的引用“键”。

此外，如果您想将实际的数据对象（而不是事件）传递给onClick函数，则需要将其传递给您的绑定。 例如：

新的onClickfunction：

 getComponent(object) { console.log(object.name); } 

传入数据对象：

 {this.state.data.map(d => { return( <li key={d.id} onClick={this.getComponent.bind(this, d)}>{d.name}</li> )} )} 

Answer 6

使用React元素处理事件与处理DOM元素上的事件非常相似。 有一些语法差异：

• React事件使用camelCase命名，而不是小写。
• 使用JSX，您将传递一个函数作为事件处理程序，而不是string。

正如React文档中所提到的，当涉及到事件处理时，它们与普通的HTML非常相似，但是使用camelcase的React中的事件名称，因为它们不是HTML，它们是JavaScript，而且当我们传递函数时传递函数在HTML的string格式，他们是不同的，但概念是非常相似的…

看下面的例子，注意事件传递给函数的方式：

 function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> ); } 

Answer 7

更好的方法来使用onclick事件： – 也传递参数

 moreService(serviceList,e){ this.setState({serviceList:serviceList,parentid:serviceList.sid}) var updatebreadcrumb = this.props.updatebreadcrumb; updatebreadcrumb(serviceList); } onClick={(e)=>this.moreService(value,e)} 

Answer 8

请评论，如果你downvote。 这是一个不使用JSX的非标准（但并不less见）React模式，而是将所有内容都放在一起。 另外，它是Coffeescript。

这个“React-way”就是这个组件自己的状态：

（ c = console.log.bind console ）

 mock_items: [ { name: 'item_a' uid: shortid() } { name: 'item_b' uid: shortid() } { name: 'item_c' uid: shortid() } ] getInitialState: -> lighted_item: null render: -> div null, ul null, for item, idx in @mock_items uid = item.uid li key: uid onClick: do (idx, uid) => (e) => # justf to illustrate these are bound in closure by the do lambda, c idx c uid @setState lighted_item: uid style: cursor: 'pointer' background: do (uid) => c @state.lighted_item c 'and uid', uid if @state.lighted_item is uid then 'magenta' else 'chartreuse' # background: 'chartreuse' item.name 

这个例子工作 – 我在本地testing。 你可以在我的github上查看这个示例代码。 env本来只是为了我自己的白板研发目的，但我把它发布给Github。 它可能会写在一些点，但你可以检查从2016年9月8日提交看到这一点。

更一般地说，如果你想看看React如何工作的CS / no-JSX模式，请看看这里最近的一些工作。 这是可能的，我将有充分的时间来完成这个应用程序的想法，其中包括NodeJS，Primus，Redis和React的堆栈的POC。