ReactJS中Input文本框设初始默认值0后无法修改的问题求助

嘿，我看到你的问题了——这个输入框没法修改的问题根源其实出在几个地方，咱们一步步来解决：

问题的核心原因 #

你在value属性里直接写了this.state.item.discount = "0"，这是直接在render方法里修改state，完全违反了React的规则！React要求state只能通过setState方法来更新，直接赋值不仅会导致组件无法正确重渲染，还会让状态变得不可控，这就是你没法修改输入框值的主要原因。另外，你没有在组件初始化时设置好初始值，而是在render里临时赋值，也会导致渲染逻辑混乱。

分步解决方案 #

1. 先在组件初始化时设置好初始值 #

在类组件的constructor里，把item.discount初始化为"0"（或者数字0，根据你的需求来），这样就不用在render里做赋值操作了：

constructor(props) {
  super(props);
  this.state = {
    item: {
      discount: "0" // 直接设置初始默认值
    }
  };
  // 绑定handleInputChange的this指向，避免报错
  this.handleInputChange = this.handleInputChange.bind(this);
}

2. 正确编写输入框的value属性 #

用简洁的空值合并运算符（??）处理可能的空值情况，绝对不要在value里修改state：

<input 
  name="discount" 
  type="text" 
  id="header_discount" 
  step="0.01" 
  maxLength="5" 
  min="0" 
  max="100" 
  // 如果state里的discount存在就用它，否则用"0"
  value={this.state.item.discount ?? "0"} 
  className="form-control" 
  onChange={this.handleInputChange} 
/>

如果你习惯用三元表达式，也可以写成value={this.state.item.discount ? this.state.item.discount : "0"}，但空值合并运算符更直观，专门处理null/undefined的情况。

3. 确保handleInputChange正确更新state #

受控组件的关键是：输入框的值由state控制，修改输入框时必须通过onChange更新state。你的handleInputChange需要正确更新item.discount：

handleInputChange(e) {
  const { name, value } = e.target;
  // 使用函数式setState，确保拿到最新的state
  this.setState(prevState => ({
    item: {
      ...prevState.item, // 展开原来的item属性，避免覆盖其他字段
      [name]: value // 用动态属性名更新对应的字段
    }
  }));
}

这样修改之后，你的输入框就是标准的受控组件了：初始值是0，当你输入内容时，onChange会触发setState更新state，输入框的value会同步变化，自然就能正常修改值了。

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