[javascript] React JS onClick 이벤트 핸들러

Program / 글쓴이

나는 가지고있다 

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

답변

왜 안 되는가 :

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>s를 루프 에 넣고 싶을 때 li.on및 li.off스타일을 background-color.

답변

내가 생각할 수있는 두 가지 방법은 

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

여기 데모입니다

이게 도움이 되길 바란다.

답변

다음은 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>
    )
  }
}

답변

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

답변

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

답변

와 이벤트 처리 요소에 반응하는 DOM 요소의 이벤트를 처리하는 매우 유사하다. 몇 가지 구문 차이가 있습니다.

  • React 이벤트는 소문자가 아닌 camelCase를 사용하여 이름이 지정됩니다.
  • JSX를 사용하면 문자열이 아닌 이벤트 핸들러로 함수를 전달합니다.

그래서 React 에서 언급했듯이 문서 이벤트 처리에 관해서는 일반 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>
  );
}

답변

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;

스 니펫 확장