컴포넌트에 대한 React onClick 이벤트

컴포넌트에 대한 React onClick 이벤트

리액트 컴포넌트에는<SensorList />아이가 많은<SensorItem />s(다른 React 컴포넌트).나는 그 사실을 선언할 수 있기를 원한다.onClick각 이벤트<SensorItem />내부에서<SensorList />. 다음을 시도했습니다.

sensorSelected: function(sensor) {
    console.log('Clicked!');
},

render: function() {
    var nodes = this.state.sensors.map(function(sensor) {
        return (
            <SensorItem onClick={ this.sensorSelected } />
        );
    }.bind(this));

    return (
        <div className="sensor-list">
            { nodes }
        </div>
    );
}

말할 필요도 없이 내 콘솔에 "클릭!"이라는 메시지가 뜨지 않습니다.Chrome의 React 인스펙터는 다음과 같이 표시됩니다.onClick이벤트는 위의 기능 본문을 사용하여 등록됩니다.

따라서 등록할 수 없습니다.onClick실제 사건<SensorItem />태그(다만, 그 이유는 알 수 없습니다.그렇지 않으면 어떻게 해야 할까요?

이는 SensorItem 구성 요소의 정의에 따라 달라집니다.SensorItem은 네이티브 DOM 요소가 아니라 말씀하신 것처럼 다른 React 구성 요소이기 때문에 여기서 정의한 onClick은 해당 구성 요소의 속성일 뿐입니다.SensorItem 컴포넌트 내에서 onClick 프로펠을 DOM 컴포넌트의 onClick 이벤트로 전달해야 합니다.

var SensorItem = React.createClass({
  render: function() {
    return (
      <div className="SensorItem" onClick={this.props.onClick}>
       ...
      </div>
    );
  }
});

문제

다른 답변에서 설명한 바와 같이 문제는 다음과 같습니다.onClick에서<SensorItem>리액션 컴포넌트(네이티브 DOM 요소와 반대)<div>또는<p>)는 DOM 이벤트핸들러가 아닌 컴포넌트 속성의 전달로 취급됩니다.그리고 가장 가능성이 높은 것은<SensorItem>컴포넌트가 선언하지 않는다.onClick재산, 그 재산 가치는 그냥 없어집니다.

솔루션

가장 간단한 해결책은 다음과 같습니다.onClick명백한 재산SensorItem컴포넌트를 그 컴포넌트의 루트 DOM 요소에 전달합니다.

function SensorItem({ prop1, prop2, onClick }) {
  (...)

  return (
    <p onClick={onClick}>
      (...)
    </p>
  );
}

그러나 일반적으로 가장 효과적인 솔루션은 객체 파괴 표기법을 사용하여 정의되지 않은 모든 컴포넌트의 속성을 그룹화한 후 해당 컴포넌트 내의 루트 DOM 요소에 전달하는 것입니다.이렇게 하면 통과할 수 있다.onClick,onHover,className각각의 속성을 정의하지 않아도 됩니다.

function SensorItem({ prop1, prop2, ...rootDOMAttributes }) {
  (...)

  return (
    <p {...rootDOMAttributes}>
      (...)
    </p>
  );
}

두 가지 접근법 중 어느 쪽을 사용하든 핸들러는 이제 동작합니다.이제 핸들러는 의 루트 DOM 요소에 연결되어 있기 때문입니다.SensorItem:

<SensorItem onClick={...} />

언급URL : https://stackoverflow.com/questions/28268835/react-onclick-event-on-component