ReactJS:onClick处理程序在放置在子组件上时不会触发怎么办?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (194)

我最近开始工作ReactJS。具体来说,我正在使用react-rails红宝石宝石和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是为了什么。

虽然我知道我可以包装一下React DivIconButton并在onClick那里写一个监听器(我已经试过这个,它的工作原理),但看起来这有点难听。

提问于
用户回答回答于

因此,在这种情况下处理事件的正确方法是将事件处理程序传递给子组件。有几种方法可以完成你想要的功能,而且我可能会以不同的方式实现这种行为(不确定用例是什么),但是我在JSX中演示了父和子组件之间的典型事件处理。你可以在这里找到它...

JSfiddle

想想这样吧:

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来引用渲染的这个ie,则不需要创建子组件

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

更好的是,你可以将它绑定到函数。

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

扫码关注云+社区

领取腾讯云代金券