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

前端之家收集整理的这篇文章主要介绍了ReactJS:onClick处理程序在放置在子组件上时不触发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我最近开始使用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的用途。

虽然我知道我可以包装一个React Div围绕IconButton和写一个onClick监听器(我试过这个和它的工作原理),它似乎是一个有点janky。

有人知道这样做的好方法吗?多谢你们!

因此,在这种情况下处理事件的正确方法是将事件处理程序传递给子组件。有几种方法来完成你想要的,我可能实现这种行为不同(不确定用例是什么),但我在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!" />
        )
    }
});
原文链接:https://www.f2er.com/react/302943.html

猜你在找的React相关文章