Реакция обработчика события 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'});
});

ОТВЕТЫ

Ответ 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

Надеюсь, это поможет.

Ответ 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.

Ответ 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>
    )
  }
}

Ответ 4

Использовать 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'));`

Ответ 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 функции больше не требуют ключевого слова '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;

Обратите внимание, что каждый динамически созданный элемент должен иметь уникальный ссылочный "ключ".

Кроме того, если вы хотите передать фактический объект данных (а не событие) в свою функцию 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>
    )}
)}

Ответ 6

Обработка событий с помощью элементов реагирования очень похожа на обработку событий на элементах DOM. Существуют синтаксические различия:

  • Реагировать события называются с помощью camelCase, а не в нижнем регистре.
  • С JSX вы передаете функцию как обработчик события, а не строку.

Итак, как упоминалось в документации Реагировать, они очень похожи на обычный HTML, когда дело доходит до обработки событий, но имена событий в React используют camelcase, потому что они на самом деле не HTML, они JavaScript, также, вы передаете функцию во время передачи вызова функции в формате строки для HTML, они разные, но концепции довольно похожи...

Посмотрите на приведенный ниже пример, обратите внимание на способ передачи события функции:

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

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

Ответ 7

Лучший способ использования события onclick: - Pass Paramter также

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

 }


onClick={(e)=>this.moreService(value,e)}

Ответ 8

Прошу прокомментировать, если вы занижены. Это нестандартная (но не столь необычная) модель React, которая не использует JSX, вместо этого ставит все в ряд. Кроме того, это Coffeescript.

"Реагировать" для этого будет с собственным состоянием компонента:

(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

В этом примере работает - я тестировал его локально. Вы можете проверить этот примерный код точно в my github. Первоначально env был только локальным для моих собственных целей r & d, но я отправил его в Github для этого. Он может быть написан в какой-то момент, но вы можете проверить фиксацию с 8 сентября 2016 года, чтобы увидеть это.

В более общем плане, если вы хотите увидеть, как работает этот шаблон CS/no-JSX для React, просмотрите недавнюю работу здесь. Возможно, у меня будет время полностью реализовать POC для этой идеи приложения, стек для которой включает NodeJS, Primus, Redis и React.