React表单子组件按钮误触父组件handleSubmit问题求助

嘿，我一眼就看到几个导致你问题的关键点，咱们一步步来修复：

问题1：按钮默认触发表单提交 #

在HTML里，<button>元素如果不指定type属性，默认会被识别为type="submit"——这就意味着你点击这个按钮时，会自动触发父级<form>的submit事件，也就是父组件的handleSubmit，这就是为什么你会跳到父组件的debugger那里，而子组件的逻辑根本没执行。

问题2：事件绑定的两处错误 #

• 首先，<button>元素没有onSubmit事件，这个事件是给<form>用的，你在按钮上写onSubmit={this.handleSubmit}完全无效；
• 其次，你按钮上绑定的onClick={this.addField}，但实际定义的方法是addItem，方法名不匹配，自然触发不了你想要的debugger。

修复后的Step3核心代码 #

addItem = event => {
  event.preventDefault() // 现在指定type后这个可以去掉，但留着也无妨
  debugger // 现在你会跳到这里啦！
  this.setState((prevState) => {
    return {list: [...prevState.list, {red:"", name:""}]}
  });
}

render(){
  if (this.props.step !== 3) {
    return null
  }
  return(
    <React.Fragment>
      {/* 给按钮指定type="button"，修正事件绑定 */}
      <button type="button" onClick={this.addItem}>Añadir Contacto</button>
      ...
    </React.Fragment>
  )
}

为什么这样能解决问题？ #

1. type="button"告诉浏览器这个按钮就是普通的交互按钮，不会触发表单提交，彻底切断了和父组件handleSubmit的关联；
2. 修正后的onClick={this.addItem}让按钮点击时正确调用你定义的添加字段方法；
3. 去掉了无效的onSubmit属性，代码更干净。

这样改完之后，点击"Añadir Contacto"按钮就会触发addItem方法，不会再意外触发父组件的表单提交啦！

内容的提问来源于stack exchange，提问作者ValRob