React多文本输入框内容无法分别渲染到对应H1标签问题排查

你的代码存在2个核心问题，直接导致两个H1标签内容始终一致：

• getValue事件处理逻辑错误：两个输入框都绑定了这个onChange回调，但不管当前触发输入的是x1还是x2输入框，你都同时执行了两次setState，把x1、x2两个状态值都设置为当前输入框的value，两个状态存储的值永远相同，提交后渲染自然一致。
• 重复定义组件state：你既在constructor中初始化了包含Input1Value、Input2Value的state，又在类属性位置重新定义了包含x1、x2的state，后者会覆盖前者的初始化内容，属于不规范写法，容易埋下状态异常的隐患。

1. 合并state初始化逻辑，删除重复的state定义，所有状态字段统一在一处初始化
2. 修改getValue逻辑，通过事件对象拿到当前触发输入的输入框name属性，只更新对应name的状态值，不要同时修改两个输入框的状态
3. 可选优化：如果需要输入实时同步展示，不需要额外加提交按钮，可以直接在输入时同步更新Input1Value、Input2Value，省掉中间x1、x2的中转状态

下面是修正后的可运行代码：

import React from 'react';

class Winner extends React.Component {
  // 统一初始化所有状态，删除重复的state定义
  state = {
    Input1Value: '',
    Input2Value: '',
    x1: '',
    x2: ''       
  }

  getValue = (event) => {
    // 拿到当前输入框的name和输入值
    const { name, value } = event.target;
    // 只更新对应name的状态，不要同时修改x1、x2
    this.setState({ 
      [name]: value
    });
  }

  handleSubmit = () => {
    const { x1, x2 } = this.state;
    this.getResult(x1, x2);
  }

  componentDidMount() {
    this.getResult("","");
  }

  getResult(value,value1) {          
    this.setState({
      Input1Value: value,
      Input2Value: value1,
    });
  }

  render() {
    return (
      <div>
        <h1>Winner</h1>
        <input type="text" name="x1" onChange={this.getValue} /> 
        <input type="text" name="x2" onChange={this.getValue} />       

        <button onClick={this.handleSubmit}>Click me!</button>
        <h1>Input1: {this.state.Input1Value}</h1>
        <h1>Input2: {this.state.Input2Value}</h1>               
      </div>
    )
  }
}

export default Winner;

如果你想要输入内容实时展示在H1标签，不需要点击按钮，可以直接在getValue里同步更新Input1Value、Input2Value，省去点击提交的步骤。

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