Javascript React ES5：一个按钮调用两个功能

我有两个react类，它们都有render函数，返回带有按钮的表单。在A类中，我必须导入B类，以便使用B类中的表单

我的问题：当我单击内部按钮时，外部按钮也会被触发，但我只希望内部提交按钮工作

我的尝试：我检查了控制台，发现它给了我一个警告：验证记忆：表单不能作为表单的后代出现。

我做了研究，认为问题可能是由于嵌套的形式。因此，我找到了一个解决方法，通过将B类中的

更改为

，使其不再是表单。现在它并没有给我控制台上的错误，但问题仍然存在：如果我单击内部按钮，外部按钮也会被触发，这总共调用了两个函数

我需要帮助的地方：我真的很想找出导致这种行为的原因（我想可能更改标记不会改变嵌套表单问题，或者我引用其他类的方式不完全正确）

我的代码：（请注意，我简化了代码）

var classA=React.createClass({
render:function（）{
返回(
拯救
)
},
})
var classB=React.createClass({
render:function（）{
返回(
添加
)
},
handleRegAdd:function（）{
var=this
var regLines=this.state.regulation
regLines.push({
注册号：空，
类型：$（'.reg类型选择span.select值标签'）。text（），
id:that.props.id，
小时数：空，
分钟：空，
天：''，
开始：空，
结束：空，
})
这是我的国家({
规则：regLines，
})
},
})

---

当我点击B类的按钮时，它只会触发函数“handleRegAdd”。但是，它也触发了A类中的提交功能

该错误与

验证记忆提示

警告无关

按钮单击（和其他DOM事件）会在组件树中弹出气泡。这意味着单击按钮也将触发所有父组件的

onClick

事件

通过在事件处理程序中调用

event.preventDefault（）

，可以停止冒泡。可能是这样的：

handleRegAdd: function(event) {
  event.preventDefault()

  // continue with the rest of your code
}

---

该错误与

validateDOMNesting

警告无关

按钮单击（和其他DOM事件）会在组件树中弹出气泡。这意味着单击按钮也将触发所有父组件的

onClick

事件

通过在事件处理程序中调用

event.preventDefault（）

，可以停止冒泡。可能是这样的：

handleRegAdd: function(event) {
  event.preventDefault()

  // continue with the rest of your code
}

---

按钮的默认

类型

为

提交

，因此，要使按钮不执行表单的

提交

操作，只需将类型更改为

按钮

：

<button type="button" id="some_ID" className="some_name" onClick={this.handleRegAdd}>
  Add
</button>

添加

---

我在评论中提到了这一点，在这里的SO问题中也提到了这一点：

按钮的默认

类型是
提交
，因此要使按钮不执行表单的
提交
操作，只需将类型更改为
按钮
：

<button type="button" id="some_ID" className="some_name" onClick={this.handleRegAdd}>
  Add
</button>


添加

我在评论中提到了这一点，在这个问题中也提到了这一点：
不幸的是，简化忽略了理解问题的关键因素。哪里定义了
handleRegAdd
？仅供参考，如果div中没有其他内容，则不需要将按钮包装在div中。而且，答案可能只是您正在使用
按钮
，按钮的默认类型是
提交
。请参阅此帖子@Sia我已经更新了我的handleRegAdd。它基本上决定了国家，仅此而已。如果上面代码的逻辑看起来是正确的，那就意味着错误来自其他方面。我会调查的。也许这不是我想的原因。不幸的是，这种简化忽略了理解问题的关键因素。哪里定义了
handleRegAdd
？仅供参考，如果div中没有其他内容，则不需要将按钮包装在div中。而且，答案可能只是您正在使用
按钮
，按钮的默认类型是
提交
。请参阅此帖子@Sia我已经更新了我的handleRegAdd。它基本上决定了国家，仅此而已。如果上面代码的逻辑看起来是正确的，那就意味着错误来自其他方面。我会调查的。也许这不是我想的。还有什么会导致类似的问题吗？react中是否有此特定结构的名称？现在我真的很好奇“在组件树上冒泡”的东西，因为我觉得我错过了一个react知识，我想读更多关于它的内容，但我似乎找不到关于它的阅读。这个（事件冒泡）不是react特有的。你可以从这个答案中了解到：还有什么会导致类似的问题吗？react中是否有此特定结构的名称？现在我真的很好奇“在组件树上冒泡”的东西，因为我觉得我错过了一个react知识，我想读更多关于它的内容，但我似乎找不到关于它的阅读。这个（事件冒泡）不是react特有的。您可以从以下答案中了解到：