React多表单场景下输入时上方表单误触发提交问题咨询

问题核心错误点 #

你调整后的代码存在3个关键逻辑问题：

1. 下方输入框的onChange绑定错误：onChange={() => this.handleChangeBuy}仅返回了事件处理函数但未执行，输入内容不会触发状态更新；换成defaultValue后组件变为非受控模式，输入内容不会同步到this.state.amount。
2. 提交按钮事件绑定错误：onSubmit是<form>标签的原生事件，不能绑定在<input type="submit">按钮上，绑定后不会触发执行。
3. 最初「下方输入触发上方提交」的根本原因是两个表单区域没有拆分独立的<form>标签，整个区域外层共用了一个<form>，浏览器默认行为会让表单内的回车操作触发全局表单提交。

解决方案 #

• 给两个表单区域分别包裹独立的<form>标签，各自绑定提交事件，触发时调用e.preventDefault()阻止默认页面刷新行为
• 恢复受控组件写法，移除无用的箭头函数包裹，直接绑定onChange处理函数
• 修正提交事件绑定逻辑：如果用type="submit"按钮，就把onSubmit绑定到对应<form>标签上；如果不想用表单提交，也可以保留type="button"直接绑定onClick事件。

修正后完整代码示例 #

// 请先确保你的事件处理函数已正确绑定this，推荐用类属性箭头函数定义，避免bind操作
handleChange = (e) => {
  this.setState({ value: e.target.value })
}
handleChangeBuy = (e) => {
  this.setState({ amount: e.target.value })
}
handleSubmit = (e) => {
  e.preventDefault()
  // 上方表单提交逻辑
  console.log('上方表单提交，输入值：', this.state.value)
}
handleBuy = (e) => {
  e.preventDefault()
  // 下方表单提交逻辑
  console.log('下方表单提交，输入值：', this.state.amount)
}

render() {
  return (
    <div className="container">
      <h1>ETH to EGP Exchange</h1>

      {/* 上方独立表单 */}
      <form onSubmit={this.handleSubmit}>
        <label>
          Enter Account:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
        <input type="submit" value="Submit" />
      </form>

      {/* 下方独立表单 */}
      <form onSubmit={this.handleBuy}>
        <input
          type="text"
          value={this.state.amount}
          onChange={this.handleChangeBuy}
        />
        <input
          type="submit"
          value="Alert the text input"
        />
      </form>

      <p>Your account: {this.state.value}</p>
      <p>Your account: {this.state.amount}</p>
      <p>Your ETH Balance: {this.state.Eth_Balance}</p>
      <p>Your EGPT Balance: {this.state.EGPT_Balance}</p>
    </div>
  );
}

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