Question

人。我是一个相对较新的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版本）中的显示方式进行，事件拒绝触发，但没有错误。

提前感谢您的帮助。

Answer 1

问题是您正在尝试使用React渲染整个HTML树。

如果您使用flow-router和react-layout，则可以简单地呈现所需的文档片段，并将其放置在ID为'react-root'的指定根节点中。

否则，如果您不需要火焰并为React创建根元素，我建议您使用static-html：

some_file.html：

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

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

然后，通过title或其他方法动态更改ReactiveVar。

Answer 2

我在React路由器上使用React，与Google的MDL一起使用，并且遇到了同样的问题（以及其他一些问题，例如导航到不同的路由会导致整页重新加载）。

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

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

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的问题有点不同，但我想我会在这里加上这个，希望它可以帮助其他人解决这个问题。：）

Answer 3

在我的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事件正常工作

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

3 个答案: