Javascript React JS onClick 事件处理程序

Question

提问by user544079

I have

我有

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

I want to color the background of the clicked list element. How can I do this in React ?

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

Something like

就像是

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

Answer 1

回答by ericsoco

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:

并且如果你想对它更具反应性，你可能希望将所选项目设置为其包含 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>
    );
},

You'd want to put those <li>s into a loop, and you need to make the li.onand li.offstyles set your background-color.

您想将这些<li>s 放入循环中，并且需要将li.on和li.off样式设置为您的background-color.

Answer 2

回答by Dhiraj

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.

我希望这有帮助。

Answer 3

回答by svnm

Here is how you define a react onClick event handler, which was answering the question title... using es6 syntax

这是您定义反应 onClick 事件处理程序的方法，它使用 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>
    )
  }
}

Answer 4

回答by itcropper

Use ECMA2015. Arrow functions make "this" a lot more intuitive.

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

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

回答by dirtigr00vz

If you're using ES6, here's some simple example code:

如果您使用的是 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;

In ES6 class bodies, functions no longer require the 'function' keyword and they don't need to be separated by commas. You can also use the => syntax as well if you wish.

在 ES6 类体中，函数不再需要 'function' 关键字，也不需要用逗号分隔。如果您愿意，您也可以使用 => 语法。

Here's an example with dynamically created elements:

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

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;

Note that each dynamically created element should have a unique reference 'key'.

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

Furthermore, if you would like to pass the actual data object (rather than the event) into your onClick function, you will need to pass that into your bind. For example:

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

New onClick function:

新的点击功能：

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

Passing in the data object:

传入数据对象：

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

Answer 6

回答by Alireza

Handling events with React elementsis very similar to handling events on DOM elements. There are some syntactic differences:
React events are named using camelCase, rather than lowercase.
With JSX you pass a function as the event handler, rather than a string.

使用React 元素处理事件与处理 DOM 元素上的事件非常相似。有一些语法差异：
React 事件使用驼峰命名，而不是小写。
使用 JSX，您可以传递一个函数作为事件处理程序，而不是一个字符串。

So as mentioned in Reactdocumentation, they quite similar to normal HTML when it comes to Event Handling, but event names in React using camelcase, because they are not really HTML, they are JavaScript, also, you pass the function while we passing function call in a string format for HTML, they are different, but the concepts are pretty similar...

所以正如React文档中提到的，在事件处理方面，它们与普通的 HTML 非常相似，但是 React 中的事件名称使用驼峰命名，因为它们不是真正的 HTML，它们是 JavaScript，此外，您在传递函数的同时传递函数调用在 HTML 的字符串格式中，它们是不同的，但概念非常相似......

Look at the example below, pay attention to the way event get passed to the function:

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

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

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

Answer 7

回答by Jalaleddin Hosseini

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;

Answer 8

回答by dabeng

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 Hope this demo can help :) I recommend changing background color by toggling classname.

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

Answer 9

回答by Jakkapan Sitthikan

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;

Answer 10

回答by Eddie D

You can make use of the React.createClone method. Create your element, than create a clone of it. During the clone's creation, you can inject props. Inject an onClick : method prop like this

您可以使用 React.createClone 方法。创建您的元素，而不是创建它的克隆。在克隆的创建过程中，您可以注入道具。像这样注入一个 onClick : method prop

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

the changeColor method will set the state with the duplicate, allowing you sto set the color in the process.

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

Javascript React JS onClick 事件处理程序

提问by user544079

回答by ericsoco

回答by Dhiraj

回答by svnm

回答by itcropper

回答by dirtigr00vz

回答by Alireza

回答by Jalaleddin Hosseini

回答by dabeng

回答by Jakkapan Sitthikan

回答by Eddie D

相关推荐

最近更新

标签

Javascript React JS onClick 事件处理程序

提问by user544079

回答by ericsoco

回答by Dhiraj

回答by svnm

回答by itcropper

回答by dirtigr00vz

回答by Alireza

回答by Jalaleddin Hosseini

回答by dabeng

回答by Jakkapan Sitthikan

回答by Eddie D

相关推荐

Javascript Bootstrap 3 - 展开和折叠表格行

Javascript 使用 jQuery 将 html 添加到 div

Javascript 添加动态类名

Javascript 如何在 React 中不使用 componentWillReceiveProps 处理道具更改

相关推荐

最近更新

标签