React中onChange与onClick事件同时触发问题排查求助

兄弟，这个问题我之前也踩过坑！结合你给出的代码片段，我帮你梳理几个最可能的原因和解决办法：

1. 按钮绑定函数时不小心直接执行了 #

看你代码里写的this.create = this.create...，如果你的按钮是这么写的：

<button onClick={this.createSection()}>创建章节</button>

那绝对是这里出问题了！this.createSection()会在组件每次渲染时立即执行，而不是点击时才触发。输入框输入内容触发onChange更新状态，组件重新渲染，这个函数就跟着跑一遍，看起来就像输入时触发了点击事件。

正确写法应该是只传函数引用，别加括号：

<button onClick={this.createSection}>创建章节</button>

2. 表单默认提交行为搞的鬼 #

如果你的输入框和按钮是放在<form>标签里的，默认情况下，输入时按回车（部分浏览器甚至输入过程中）会触发表单的默认提交行为。如果你的按钮没指定type="button"，它默认是type="submit"，就会被表单提交触发。

解决办法有两个：

• 给按钮加type="button"属性：

<button type="button" onClick={this.createSection}>创建章节</button>

• 或者在表单上阻止默认提交行为：

<form onSubmit={(e) => e.preventDefault()}>
  {/* 输入框和按钮 */}
</form>

3. 事件冒泡导致的误触发 #

如果输入框和按钮有嵌套关系，或者createSection是绑定在它们的父元素上的，输入框的onChange事件冒泡到上层，可能会误触发父元素的点击逻辑。

这种情况可以在输入框的onChange里阻止冒泡：

handleChange(e) {
  e.stopPropagation(); // 阻止事件向上冒泡
  this.setState({ section_title: e.target.value });
}

4. 渲染时不小心调用了函数 #

检查你的render函数，确保没有在渲染逻辑里直接调用this.createSection()，比如像这样的错误写法：

render() {
  // 错误：这里会每次渲染都执行函数
  this.createSection();
  return (
    // ...组件内容
  )
}

结合你的代码片段，最大概率是第1种情况——按钮绑定函数时多写了括号。先检查这个点，应该能解决问题！

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