ReactJS : 자식 구성 요소에 배치 될 때 onClick 핸들러가 실행되지 않음

ReactJS : 자식 구성 요소에 배치 될 때 onClick 핸들러가 실행되지 않음

---

저는 최근에 ReactJS. 특히 react-rails루비 보석과 react-bootstrap구성 요소를 활용 하고 있습니다.

onClick하위 구성 요소에 이벤트 리스너를 배치하는 것과 관련하여 질문이 있습니다 .

아래 코드 샘플에서 볼 수 있듯이 render함수 에서 자식 구성 요소를 '호출'하는 부모 구성 요소가 있습니다. 이 render함수 에는 클릭 할 때 onClick호출하는 React 리스너가 handleToggle있습니다.

###* @jsx React.DOM ###

ToggleIconButton = React.createClass
  getInitialState: ->
    toggleOn: false
  handleToggle: (evt) ->
    this.setState(toggleOn: !this.state.toggleOn)
  render: ->
    `<IconButton onClick={this.handleToggle}>Toggle Button</IconButton>`

IconButton = React.createClass
  render: ->
    # BsButton and BsGlyphicon are React-Bootstrap components
    `<BsButton>
      <BsGlyphicon glyph={this.props.glyph} />
      {" " + this.props.text}
     </BsButton>`

---

불행히도 이것은 내가 생각했던 방식으로 작동하지 않습니다. ToggleIconButton::handleToggle전화를받지 않습니다. 대신, onClick리스너에 배치 IconButton하고 참조 ToggleIconButton::handleToggle.

---

에 추가 동작을 추가하고 싶지 않습니다 IconButton. 내가보기에 조건부 논리는 IconButton. 해야 할 일은 아이콘과 버튼을 나타내기만하면 브라우저 이벤트에 대해 걱정할 필요가 없습니다. 그게 ToggleIconButton목적입니다.

내가 React Div둘러 IconButton보고 onClick거기 에 리스너를 쓸 수 있다는 것을 알고 있지만 (나는 이것을 시도했고 작동한다), 그것은 약간 버벅 거림 인 것 같다.

아무도 이것을하는 좋은 방법을 알고 있습니까? 감사합니다!

---

따라서이 경우 이벤트를 처리하는 적절한 방법은 이벤트 처리기를 자식 구성 요소에 전달하는 것입니다. 원하는 것을 수행하는 몇 가지 방법이 있으며,이 동작을 다르게 구현할 수 있지만 (사용 사례가 무엇인지 확실하지 않음) JSX에서 부모 및 자식 구성 요소 간의 일반적인 이벤트 처리를 보여주는 예제를 연결했습니다. 여기에서 찾을 수 있습니다 ...

JS 바이올린

다음과 같이 생각하십시오.

var ParentComponent = React.createClass({
    render: function(){
        return (
            <ChildComponent onSomeEvent={this.handleThatEvent} />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

var ChildComponent = React.createClass({
    render: function(){
        return (
           <input type="button" onClick={this.props.onSomeEvent} value="Click Me!" />
        )
    }
});

---

노드를 호출하기 전에 렌더링을 참조하기 위해 var를 만드는 경우 하위 구성 요소를 만들 필요가 없습니다.

var self = this;

예를 들어 (이것은 인위적이며이 경우 var self는 필요하지 않지만 중첩 된 return 문의 경우 필요합니다).

var ParentComponent = React.createClass({
    render: function(){
        var self = this;
        return (
            <input type="button" onClick={self.handleThatEvent} value="Click Me!" />;
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

더 나은 방법은 이것을 함수에 바인딩 할 수 있다는 것입니다.

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }.bind(this));
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

또는 댓글에서 캡 트레이의 제안을 따르려면

var ParentComponent = React.createClass({
    render: function(){
        return (
            this.state.array.map(function(){
              return (<input type="button" onClick={this.handleThatEvent} value="Click Me!" />);
            }, this);
        )
    },
    handleThatEvent: function(e){
         //update state, etc.
    }
});

참조 URL : https://stackoverflow.com/questions/24103072/reactjs-onclick-handler-not-firing-when-placed-on-a-child-component