React表单输入框绑定value后无法编辑的问题咨询

你遇到的问题核心是受控组件的状态更新逻辑缺失。

当你给输入框设置value={customer != null ? customer[field.name] : ""}时，这个输入框就变成了React的受控组件——它的值完全由你传入的customer状态控制。但你没有给输入框添加onChange事件处理函数来更新customer的对应字段值，所以用户输入时，customer状态不会变化，输入框的value也不会更新，看起来就像是无法编辑。

如果移除value属性，输入框就变成了非受控组件，它的值由DOM自身管理，自然可以编辑，但因为没有绑定状态值，所以初始时无法显示客户数据。

解决办法 #

• 给每个输入框添加onChange事件处理函数，在用户输入时更新customer状态中对应的字段：

  <input
    type="text"
    name={field.name}
    value={customer != null ? customer[field.name] : ""}
    onChange={(e) => {
      // 更新customer状态，注意要创建新对象，不要直接修改原状态
      setCustomer(prev => ({
        ...prev,
        [field.name]: e.target.value
      }));
    }}
  />
  

• 确保customer是通过React状态管理的（比如用useState或者useReducer），而不是直接修改的原始数据对象——React只有在状态更新时才会重新渲染组件，更新输入框的值。

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