ReactJS：onClick处理程序放置在子组件上时不会触发

Question

我最近开始使用ReactJS。具体来说，我正在使用react-rails ruby​​ gem 和react-bootstrap 组件。

我有一个关于在子组件中放置onClick 事件侦听器的问题。

从下面的代码示例中可以看出，我有一个父组件，它在其render 函数中“调用”一个子组件。在 render 函数中，我有 React 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 的用途。

虽然我知道我可以在 IconButton 周围包裹一个 React Div 并在那里写一个 onClick 监听器（我已经尝试过并且它有效），但这似乎有点笨拙。

有人知道这样做的好方法吗？谢谢大家！

Answer 1

因此，在这种情况下处理事件的正确方法是将事件处理程序向下传递给子组件。有几种方法可以实现您想要的，我可能会以不同的方式实现此行为（不确定用例是什么），但我在 JSX 中为您连接了一个示例，该示例演示了父组件和子组件之间的典型事件处理。你可以在这里找到它...

JS Fiddle

你可以这样想：

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!" />
        )
    }
});

Answer 2

如果在调用节点之前创建一个 var 来引用渲染的 this 即

，则不需要创建子组件

var self = this;

例如（这是人为设计的，在这种情况下不需要 var self，但在嵌套返回语句的情况下则需要）。

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

更好的是，您可以将 this 绑定到函数。

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

或者在 cmets 中遵循 captray 的建议

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