ReactJS:onClick 处理程序在放置在子组件上时不会触发 [英] ReactJS: onClick handler not firing when placed on a child component

问题描述

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

I recently started working with ReactJS. Specifically, I am utilizing the react-rails ruby gem and react-bootstrap components.

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

I have a question regarding placing onClick event listeners in child components.

从下面的代码示例中可以看出，我有一个父组件，它在其 render 函数中调用"一个子组件.在那个 render 函数中，我有 React onClick 监听器，它在被点击时调用 handleToggle.

As you can see from the code sample below, I have a parent component that 'calls' a child component in its render function. Within that render function, I have React onClick listener that calls handleToggle when it is clicked.

###* @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.

---

Unfortunately, this doesn't work the way I thought it would. ToggleIconButton::handleToggle never gets called. Instead, the onClick listener is placed on IconButton and references ToggleIconButton::handleToggle.

我不想向 IconButton 添加任何额外的行为.在我看来，IconButton 中不应放置任何条件逻辑.它应该做的就是代表一个图标和按钮，而不必担心任何浏览器事件.这就是 ToggleIconButton 的用途.

I don't want to add any additional behavior to IconButton. The way I see it, no conditional logic should be placed in IconButton. All it should do is represent an icon and button and not have to worry about any browser events. That's what ToggleIconButton is for.

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

While I know I could wrap a React Div around IconButton and write an onClick listener there (I've tried this and it works), it seems like that's a bit janky.

有人知道这样做的好方法吗?谢谢各位！

Does anybody know a good way of doing this? Thanks guys!

推荐答案

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

So, the proper way to handle eventing in this case would be to pass the event handler down to the child component. There are a few ways to accomplish what you want, and I might implement this behavior differently (not sure what the use case is), but I wired up an example in JSX for you that demonstrates the typical event handling between Parent and Child Components. You can find it here...

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

这篇关于ReactJS:onClick 处理程序在放置在子组件上时不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！