React.js의 OnClick 이벤트 바인딩

React.js의 OnClick 이벤트 바인딩

에게 divid,그 또는 의 자 하면 "div"가 .div을 사용하다제가 어디서 실수를 하고 있는지 알려주세요.을 사용하다

viewMore: function(i,j){
        console.log('You clicked: ', i  );
    },

render : function(){
  var attributeId = "groups_";
  attributeId+= index;
  return(
  //parent div
    <div className="groups" id={attributeId} onClick={this.viewMore}>
        <div className="floatLeft"> Group Name: <h3>My Name</h3></div>
            <span className="floatRight typeCd">POC</span>
        <div className="clearfix"> Key Attributes: 
            <ul>
                <li> POC 1</li>
            </ul>
        </div>
    </div>
    )
};

viewMore = (i,j) => () => {
    console.log(i,j)
}

이벤트 핸들러에게 파라미터를 전달하려면 카레링을 사용해야 합니다.위의 방법에서는 렌더가 호출되는 동안 항상 새로운 함수가 생성되지 않습니다.

이러한 제안을 여러 곳에서 볼 수 있기 때문에, 코멘트를 답변으로 옮겨 추가 보기를 제공합니다.

class TestComponent extends React.Component {
  constructor() {
    super();
    this.onClick = this.handleClick.bind(this);
  }

  handleClick(event) {
    const {id} = event.target;
    console.log(id);
  }

  render() {
    return (
      <div>
        <h3 id={this.props.id} onClick={this.onClick}>
          {this.props.name}
        </h3>
      </div>
    );
  }
}

이를 통해 다음 작업을 수행할 수 있습니다.

1. 불필요한 구속을 피하다
2. 접속하다id그리고 다른 특성들은 훨씬 더 리액트-라이브 방식으로.

에서는, 을 전제로 하고 있습니다.id을 사용하다

업데이트 1 - 2016년 11월 28일

위의 코멘트에서 CodePen에 대한 링크를 추가했습니다.

업데이트 2 -- 2017년 3월 30일

이미 설명한 바와 같이 컴포넌트를 정의하기 위해 를 사용하는 경우에는 이 기능이 작동하지 않습니다.당신은 이걸 해낼 건설자가 없어요.조금 추해도 괜찮다면 다른 라이프 사이클 방법을 사용할 수 있습니다.

그러고 보니 2017년이네요.ES6를 써줄래?

업데이트 3 -- 2017년 5월 12일

클래스 속성 변환을 사용하는 경우 변환을 더욱 단순화할 수 있습니다.

class TestComponent extends React.Component {
  onClick = (event) => {
    const {id} = event.target;
    console.log(id);
  }

  render() {
    return (
      <div>
        <h3 id={this.props.id} onClick={this.onClick}>
          {this.props.name}
        </h3>
      </div>
    );
  }
}

업데이트 4 - 2018년 2월 4일

bind의 (Chakra 등)을 하는 것이 .this.click.bind(this)또는 전달 시 화살표 기능으로 감싼다.onClick.

왜요?

성능상의 이유만으로 개발된 이전 방법에서는 구성 요소의 프로토타입에 동적으로 기능을 주입할 수 있는 몇 가지 가능성을 차단했습니다.

주 1 - 2018년 4월 14일

되어 있는 에서는, 각 「4」와, 의 문제가 몇개인가 하고 있는 해 주세요.render을 bind이는 다시 자성분까지 흘러내리고 매번 기능이 바뀌기 때문에 불필요한 재렌더 현상이 발생합니다.render)가 발생합니다.

화살표 함수를 인라인으로 전달해도 같은 현상이 발생합니다.

클래스 속성을 사용하는 것과 같은 다른 모든 메서드는 단순히 현재 Babel이 프로토타입 체인에 없는 "on-instance" 함수로 변환하기 때문에 상속을 방해합니다.

자, 이겁니다.

class Person {
  printA = () => { console.log('a') }
}

다음과 같이 됩니다.

function _classCallCheck(instance, Constructor) {...abridged...}

var Person = function Person() {
  _classCallCheck(this, Person);

  this.printA = function () {
    console.log('a');
  };
};

ES6에 대한 최신 답변은 이쪽(https://stackoverflow.com/a/35748912/76840)에서 작성했습니다.

기본적으로 화살표 함수식을 사용할 수 있습니다. 화살표 함수식을 사용하면this:

onClick={(event)=>this.viewMore(attributeId, event)}

이 편집 시점에서는 스테이지 2를 유효하게 한 상태에서 Babel을 사용하고 있는 경우는, 다음과 같은 속성을 사용할 수 있습니다.

// Within your class...
viewMore = (event) => { /* ... */ }
// Within render method in your JSX
onClick = {this.viewMore}

카레링 기능을 사용할 수 있습니다.

ES5:

viewMore(param) { // param is the argument you passed to the function
    return function(e) { // e is the event object that returned

    };
}

ES6

viewMore = param => e => {
  // param is the argument you passed to the function
  // e is the event object that returned
};

이렇게 사용하시면 됩니다.

onClick={this.viewMore("some param")}

다음은 최신 정보와 이전 답변의 개요입니다.

1. @HenrikAnderson의 onClick={this.viewMore.bind(this, attributeId)} 사용.이 접근방식은 목적에 부합하지만 많은 경우 불편하게 여기는 바인드 구문을 사용합니다.

2. @ZenMaster가 언급한 퍼블릭클래스 필드 사용.이 솔루션은 거의 동일한 성능을 가지고 있으며 구문도 더 우수합니다.하지만 변수를 전달해야 할 때는 까다로워집니다.

   class TestComponent extends React.Component {
     onClick = (event) => {
       const {id} = event.target;
       console.log(id);
     }
   
     render() {
       return (
         <div>
           <h3 id={this.props.id} onClick={this.onClick}>
             {this.props.name}
           </h3>
         </div>
       );
     }
   }
   

상기의 어프로치에서는 파라미터의 전달은 생략하고 커스텀아트리뷰트를 사용하여 클릭핸들러에 필요한 데이터에 액세스 합니다.

보다 나은 해결책은 다음과 같습니다.

class MyComponent extends React.Component {

    handleClick = (item) => (e) => {
        e.preventDefault()    
        console.log(`This has access to item ${item}! and event(e)`)
    }

    render(){
        const item={ id:'1', value: 'a' }
        return(
            <button onClick={ this.handleClick(item) }  >Click</button>
        )
    }

}

레퍼런스:React 앱에서 화살표 기능으로 이벤트 처리

온클릭 이벤트 사용방법 코드입니다.

var attributeId = "groups_";
  attributeId = 32;

  const viewMore = (val) => () => {
    console.log(val)
  }
  return (
    //parent div
    <div className="groups" id={attributeId} onClick={viewMore(attributeId)}>
      <div className="floatLeft"> Group Name: <h3>My Name</h3></div>
      <span className="floatRight typeCd">POC</span>
      <div className="clearfix"> Key Attributes:
        <ul>
          <li> POC 1</li>
        </ul>
      </div>
    </div>
  )

언급URL : https://stackoverflow.com/questions/27397266/onclick-event-binding-in-react-js