ReactJS：通过state变量生成的文本框无法编辑问题求助

你遇到的问题核心在于错误地将JSX元素存储到了state中，这完全违背了React「数据驱动视图」的核心逻辑：

• 对于amount1的输入框：你在componentDidMount里创建了一个固定的<input>元素，此时它的value被绑定为当时的this.state.amount1（也就是"10"），然后把这个已经生成好的静态元素存入state。之后React渲染时只是把这个现成的元素输出——既没有绑定onChange事件来触发state更新，就算你手动修改state里的amount1，这个已经创建好的JSX元素也不会重新生成，所以输入框的值永远停留在初始的10，完全无法编辑。

• 对于amount2的输入框：它是在render函数中直接渲染的，每次组件render都会重新生成这个元素，和state的绑定是实时的（哪怕你现在没写onChange，它的表现也会比amount1灵活很多，补上事件后就能正常工作）。

正确的做法是永远只在state里存储纯数据，视图部分放在render或者独立组件里动态生成，同时为受控组件绑定onChange事件来同步数据：

constructor(props) { 
  super(props); 
  this.state = { 
    amount1:"10", 
    amount2:"20", 
  } 
  // 提前绑定this，避免箭头函数的重复创建开销
  this.handleAmountChange = this.handleAmountChange.bind(this);
} 

handleAmountChange(e) {
  const { name, value } = e.target;
  this.setState({
    [name]: value
  });
}

render() { 
  return( 
    <div> 
      <input 
        type="text" 
        name="amount1" 
        value={this.state.amount1}
        onChange={this.handleAmountChange}
      />
      <input 
        type="text" 
        name="amount2" 
        value={this.state.amount2}
        onChange={this.handleAmountChange}
      />
    </div> 
  ) 
}

React的设计思路是「数据源变化 → 重新渲染视图」，把JSX元素存在state里相当于把视图和数据源混在一起，破坏了这个闭环，会导致视图无法随数据更新而同步变化。所以记住：state只存字符串、数字、对象这类纯数据，视图逻辑全部交给render或组件来处理。

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