React(Meteor）中的子组件未触发事件

Child Component in React (Meteor) not firing events

本文关键字：组件 事件 Meteor React      更新时间：2023-09-26

各位。我是一个相对较新的Meteor开发人员，在学习了Blaze之后，我决定开始学习React，因为这似乎是正确的做法，我有点喜欢它的工作原理。

无论如何，我正在处理的一些代码有问题，可以使用一些指导。。。我有以下代码段：

https://gist.github.com/czbaker/2101526219eea5330553

出于某种原因，当组件中的表单被提交时，它并没有启动用于处理提交的函数。相反，它会刷新页面（因为event.preventDefault()从未发生过）。

是什么导致了这种情况的发生？根据IRC上的建议，我尝试用以下内容替换onSubmit={this.handleSubmit}：

  • onSubmit={()=>{this.handleSubmit}}
  • onSubmit={this.handleSubmit()}

它们都没有任何效果，表单提交函数仍然没有被调用。我真的很困惑，因为我大部分时间都遵循了文档，看起来它应该是有效的。

由于我是React的新手，我确信我忽略了一些东西，但不知道是什么。有人能帮我一下吗？提前感谢！

当前项目也在BitBucket存储库中，供有需要的人使用https://bitbucket.org/czbaker/karuto/

到目前为止，我所能想到的是，如果我使用ReactLayout单独渲染有问题的组件（而不是作为另一个组件的子组件），它会很好地工作，但当我第二次尝试将其渲染为子组件时（按照MDG的Todos教程（React版本）中所示的方式进行），事件会拒绝启动，但没有错误。

提前感谢您的帮助。

问题是您试图使用React呈现整个HTML树。

如果您使用flow-router和react-layout，您可以简单地呈现您想要的文档片段，它将被放置在指定的根节点中，该根节点的id为'react-root'。

否则，如果您不需要blaze并为React:创建根元素，我建议使用静态html

some_file.html:

<body>
    <div id="react-container"></div>
</body>

然后使用首选路由器将根组件渲染到其中。

然后，通过ReactiveVar或一些其他方法动态地改变title。

我正在使用React和React Router，以及谷歌的MDL，并遇到了同样的问题（以及其他一些问题，例如导航到不同的路线会导致整个页面重新加载）。

在试图查找原因时，我发现从父组件中{this.props.children}周围的div中删除MDL类会导致事件侦听器正确启动。

经过调查，这似乎是由于MDL构造DOM节点的方式造成的，并且可以通过在每个子组件的componentDidUpdate()方法中调用componentHandler.upgradeDOM()来解决，如下所示：

App = React.createClass({
 render() {
   return(
    <div className="mdl-layout mdl-js-layout">
     ...
       <div className="mdl-layout__content">
        { this.props.children }
       </div>
   </div>
  );
 }
});

ChildComponent = React.createClass({
 handleClick() {
   alert("I've been clicked!");
 },
 render() {
   return(
     <div>
       <button onClick={this.handleClick} 
         className="mdl-button mdl-js-button">Click Me</button>
     </div>
  );
 },
componentDidUpdate() {
  componentHandler.upgradeDOM();
},
});

如这里概述的，http://quaintous.com/2015/07/09/react-components-with-mdl/；或者使用"匹配"版本的MDL，如此处所示：https://github.com/tleunen/react-mdl

我知道这与OP的问题有点不同，但我想我会在这里添加这一点，希望它能帮助其他人解决这个问题。：）

在我的Layout.jsx中，我更改了

export default class extends React.Component {
   render() {
     return(
       <body>
         ...some jsx
       </body>
     );
   }
}

至

export default class extends React.Component {
   render() {
     return(
       <div>
         ...some jsx
       </div>
     );
   }
}

这很有帮助，现在React事件运行良好

相关文章：