CreateCandidate组件接收Technologies传值时表单自动提交问题求助

嘿，我之前也踩过类似的表单莫名自动提交的坑！咱们一步步来排查解决：

1. 先查Technologies组件里的按钮类型 #

大概率是这个原因！HTML里的<button>元素默认type是submit——也就是说，如果你在Technologies组件里用了按钮来选择/添加技术项，点击它的时候会自动触发父表单的提交事件，哪怕你没特意写提交逻辑！

解决办法： #

给Technologies里所有操作类的按钮显式加上type="button"，比如：

// Technologies组件内的按钮示例
<button type="button" onClick={handleSelectTech}>
  选择这项技术
</button>

2. 检查状态更新的逻辑 #

如果CreateCandidate是通过props接收Technologies传递的技术项，并且在接收时更新了内部状态，要注意有没有在状态更新的钩子（比如componentDidUpdate）里不小心触发了表单提交，或者因为依赖项设置不对导致不必要的重渲染，间接触发了提交。

解决办法： #

• 检查componentDidUpdate里的逻辑，确保只有在技术项真的变化时才更新状态，别附带提交表单的代码；
• 如果是函数组件的话，检查useEffect的依赖数组，避免把频繁变化的变量放进去导致反复重渲染。

3. 确认表单提交事件的绑定 #

看你给出的submit方法已经用了e.preventDefault()，这部分是对的，但要确保表单的onSubmit绑定没写错：

// CreateCandidate里的表单要这样绑
<form onSubmit={this.submit}>
  {/* 表单内容 */}
  <Technologies onTechChange={this.handleTechChange} />
</form>

别把onClick误绑到表单上，或者其他会触发提交的错误绑定方式。

4. 确保e.preventDefault()放在最前面 #

虽然你代码里写了，但一定要把这行放在submit方法的最开头，确保优先阻止表单的默认提交行为，避免后面的逻辑还没执行就触发了提交：

submit(e) {
  e.preventDefault(); // 这行必须第一时间执行！
  const data = new FormData(e.target);
  // 后续的fetch请求逻辑...
}

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