ReactJS: onClick 핸들러를 자 컴포넌트에 배치해도 부팅되지 않음

ReactJS: onClick 핸들러를 자 컴포넌트에 배치해도 부팅되지 않음

저는 최근에 이 회사와 함께 하기 시작했습니다.ReactJS구체적으로는, 저는,react-rails루비 보석과react-bootstrap구성 요소들.

배치에 대한 질문이 있습니다.onClick이벤트 수신기를 하위 구성요소로 설정합니다.

아래 코드 샘플에서 볼 수 있듯이 부모 컴포넌트는 자 컴포넌트를 호출합니다.render기능.그 안에서render기능, 리액트가 있습니다.onClick가 호출하는 청취자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는 필요 없지만 nested 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