Question

我有两个反应类都有渲染函数，它返回带有按钮的表单。在A类中，我必须导入B类，因此我可以使用B类中的表格。

我的问题：当我点击内部按钮时，外部按钮也会被触发，但我只想让内部提交按钮起作用。

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

我做了研究，并认为问题可能是由于嵌套形式。所以我通过将B类中的<form></form>更改为<div></div>来找到SO的解决方法，因此它不再是表单。现在它没有给我控制台上的错误，但问题仍然存在：如果我单击内部按钮，外部按钮也会被触发，它总共调用了两个函数。

我需要帮助的地方：我真的想弄明白导致这种行为的原因（我想也许更改标签不会改变嵌套表单问题或者我引用其他类的方式是不完全正确的）

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

var classA = React.createClass({
  render: function() {
    return (
      <div>
        <form
          className={this.props.className}
          id={this.props.controllerSingular + '_form'}
          onSubmit={this.handleSubmit}
          ref="some_form"
        >
          <FieldSet>
            <ClassB id={this.state.id} />
          </FieldSet>
          <button onClick={this.submit} className="btn btn-primary">
            Save
          </button>
        </form>
      </div>
    )
  },
})

var classB = React.createClass({
  render: function() {
    return (
      <div>
        <button id="some_ID" className="some_name" onClick={this.handleRegAdd}>
          Add
        </button>
      </div>
    )
  },
  handleRegAdd: function() {
    var that = this
    var regLines = this.state.regulation
    regLines.push({
      reg_id: null,
      Type: $('.reg-type-select span.Select-value-label').text(),
      id: that.props.id,
      Hours: null,
      Minutes: null,
      Days: '',
      Start: null,
      End: null,
    })

    this.setState({
      regulations: regLines,
    })
  },
})

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

Answer 1

该错误与validateDOMNesting警告无关。

按钮点击（和其他DOM事件）冒泡组件树。这意味着点击该按钮也会触发所有父组件的onClick事件。

您可以通过在事件处理程序中调用event.preventDefault()来停止冒泡。它可能看起来像这样：

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

  // continue with the rest of your code
}

Answer 2

按钮的默认type为submit，因此要让按钮不执行表单的onSubmit操作，只需将类型更改为button：

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

我在评论中提到了这一点，这个SO问题也在这里提到：HTML button to NOT submit form

React ES5：一个按钮调用了两个函数

2 个答案: