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'});
});
391140 次浏览
小开

我能想到的两种方法是

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

这是 演示

希望这个能帮上忙。

小开

为什么不:

onItemClick: function (event) {


event.currentTarget.style.backgroundColor = '#ccc';


},


render: function() {
return (
<div>
<ul>
<li onClick={this.onItemClick}>Component 1</li>
</ul>
</div>
);
}

如果你想要更多的反应，你可能想要设置选择的项目作为其包含反应组件的状态，然后引用该状态来确定项目的颜色在 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。

小开

如果您正在使用 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类主体中，函数不再需要“ function”关键字，也不需要用逗号分隔。如果愿意，还可以使用 = > 语法。

下面是一个动态创建元素的例子:

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;

注意，每个动态创建的元素都应该有一个唯一的引用“ key”。

此外，如果希望将实际的数据对象(而不是事件)传递到 onClick 函数中，则需要将其传递到绑定中。例如:

新的 onClick 功能:

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>
)}
)}
小开

下面是如何定义 事件处理程序的，它使用 es6语法来回答问题的标题

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>
)
}
}
小开

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

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'));`
小开

这是一个非标准(但并不罕见)的 React 模式，它不使用 JSX，而是将所有内联。还有，这是咖啡手稿。

这种“反应方式”可以用组件自身的状态来实现:

(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

这个示例可以工作——我在本地测试了它。 您可以在 我的小弟弟查看这个示例代码。 最初，env 只是为了我自己的白板研发目的而在本地使用，但我把它发布到 Github 上就是为了这个。它可能会在某个时候被改写，但是您可以查看2016年9月8日的提交来看看这个。

更一般地说，如果您想了解用于 React 的 CS/no-JSX 模式是如何工作的，请查看一些最近的工作 给你。这是可能的，我将有时间充分实现这个应用程序的想法，其中包括 NodeJS，Primus，Redis 和反应堆的 POC。

小开

用 反应元素处理事件与处理事件非常相似 有一些语法上的差异:

  • React 事件使用 camelCase 命名，而不是小写。
  • 使用 JSX，您可以将函数作为事件处理程序而不是字符串传递。

正如 做出反应文档中提到的，它们在事件处理方面非常类似于普通的 HTML，但是在使用 camelcase 的 React 中，事件名称，因为它们不是真正的 HTML，它们是 JavaScript，而且，当我们传递函数调用时，它们是以字符串格式传递 HTML 的，它们是不同的，但是概念非常相似..。

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

function ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}


return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
小开

您可以使用 React.createClone 方法。创建您的元素，然后创建它的克隆。在克隆的制作过程中，你可以注入道具。像这样注入一个 onClick: 方法道具

{ onClick : () => this.changeColor(originalElement, index) }

ChangeColor 方法将用副本设置状态，允许您在过程中设置颜色。

render()
{
return(
<ul>


{this.state.items.map((val, ind) => {
let item = <li key={ind}>{val}</li>;
let props = {
onClick: () => this.Click(item, ind),
key : ind,
ind
}
let clone = React.cloneElement(item, props, [val]);
return clone;
})}


</ul>
)
}

小开 

import React from 'react';


class MyComponent extends React.Component {


getComponent(event) {
event.target.style.backgroundColor = '#ccc';
      

// or you can write
//arguments[0].target.style.backgroundColor = '#ccc';
}


render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}


export { MyComponent };  // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;

小开 

class FrontendSkillList extends React.Component {
constructor() {
super();
this.state = { selectedSkill: {} };
}
render() {
return (
<ul>
{this.props.skills.map((skill, i) => (
<li
className={
this.state.selectedSkill.id === skill.id ? "selected" : ""
}
onClick={this.selectSkill.bind(this, skill)}
style=\{\{ cursor: "pointer" }}
key={skill.id}
>
{skill.name}
</li>
))}
</ul>
);
}


selectSkill(selected) {
if (selected.id !== this.state.selectedSkill.id) {
this.setState({ selectedSkill: selected });
} else {
this.setState({ selectedSkill: {} });
}
}
}


const data = [
{ id: "1", name: "HTML5" },
{ id: "2", name: "CSS3" },
{ id: "3", name: "ES6 & ES7" }
];
const element = (
<div>
<h1>Frontend Skill List</h1>
<FrontendSkillList skills={data} />
</div>
);
ReactDOM.render(element, document.getElementById("root"));
.selected {
background-color: rgba(217, 83, 79, 0.8);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


<div id="root"></div>

@ user544079希望这个演示能有所帮助:)我建议通过切换类名来改变背景颜色。

小开 

import React from 'react';


class MyComponent extends React.Component {


getComponent(event) {
event.target.style.backgroundColor = '#ccc';
      

// or you can write
//arguments[0].target.style.backgroundColor = '#ccc';
}


render() {
return(
<div>
<ul>
<li onClick={this.getComponent.bind(this)}>Component 1</li>
</ul>
</div>
);
}
}


export { MyComponent };  // use this to be possible in future imports with {} like: import {MyComponent} from './MyComponent'
export default MyComponent;


提交答案