web-dev-qa-db-ja.com

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'});
});
98
user544079

なぜだけではない:

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.onli.offスタイルにあなたのbackground-colorをセットさせる必要があります。

81
ericsoco

私が考えることができる2つの方法があります

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 _ です。

これが役に立つことを願っています。

60
Dhiraj

Es6構文を使用して質問のタイトルに答えていた react onClickイベントハンドラ を定義する方法は次のとおりです。

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

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'));`
17
itcropper

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

React要素 でイベントを処理することは、DOM要素でイベントを処理することと非常によく似ています。構文上の違いがいくつかあります。

  • リアクトイベントは小文字ではなくキャメルケースを使って命名されます。
  • JSXでは、文字列ではなく関数をイベントハンドラとして渡します。

React ドキュメントで述べたように、イベント処理に関しては通常のHTMLと非常によく似ていますが、キャメルケースを使用した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>
  );
}
3
Alireza

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>
    )
  }
2
Eddie D
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;
1

2019+:React Hooksを使うべきです

react 16.8で導入: https://reactjs.org/docs/hooks-intro.html

フックとはフックはReactの機能を「フック」するための特別な機能です。たとえば、useStateは、React状態を機能コンポーネントに追加するためのフックです。

いつフックを使用しますか?関数コンポーネントを書いて、それに何らかの状態を追加する必要があることに気づいたら、以前はそれをクラスに変換しなければなりませんでした。これで、既存の機能コンポーネント内でフックを使用できます。

それは次のようになります。

import React, { useState } from 'react';

function Example() {
  const [itemId, setItem] = useState();

  return (
    <div>
        <ul>
            <li onClick={() => setItem(1)} className={itemId == 1 ? "on" : "off"}>Component 1</li>
            <li onClick={() => setItem(2)} className={itemId == 2 ? "on" : "off"}>Component 2</li>
            <li onClick={() => setItem(3)} className={itemId == 3 ? "on" : "off"}>Component 3</li>
        </ul>
    </div>
  );
}
0
Sebastien Horin