React中onChange内setState后，输入框defaultValue未更新的解决方法

问题原因 #

defaultValue是非受控组件的属性，仅在组件首次挂载时读取一次值。后续即使关联的state发生变化，React也不会重新设置这个值，所以第二个输入框会一直显示初始的2。另外你的代码里还有个小问题：handleChange函数没有更新state.one的值，导致不管第一个输入框输入什么，state.one始终是初始的1，state.two只会变成6，不会随输入内容动态变化。

解决方案 #

方案1：改为受控组件（推荐）

把第二个输入框的defaultValue换成value，绑定state.two。同时修正handleChange函数，先更新state.one为输入框的实际值，再计算state.two。这样两个输入框都会随state变化实时更新：

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    const newOne = Number(e.target.value);
    setState({ 
      one: newOne, 
      two: newOne + 5 
    });
  };

  return (
    <form>
      <input value={state.one} onChange={handleChange} type="number" />
      <input value={state.two} type="number" />
    </form>
  );
}

• 给输入框加上type="number"是为了确保输入的是数字，避免字符串拼接问题。
• 受控组件通过value绑定state，onChange触发state更新，形成数据闭环，是React推荐的表单处理方式。

方案2：用key强制重新渲染非受控组件

如果一定要保留非受控组件的写法，可以给第二个输入框添加key属性，当state.two变化时，key同步变化，React会销毁旧组件并重新挂载新组件，从而读取新的defaultValue：

function ProjectsComponent() {
  const [state, setState] = useState({ one: 1, two: 2 });

  const handleChange = (e) => {
    const newOne = Number(e.target.value);
    setState({ 
      one: newOne, 
      two: newOne + 5 
    });
  };

  return (
    <form>
      <input defaultValue={state.one} onChange={handleChange} type="number" />
      <input defaultValue={state.two} key={state.two} type="number" />
    </form>
  );
}

• 这种方式适合不需要双向绑定的场景，但相比受控组件，它会触发组件重新挂载，性能略差，一般不推荐作为首选方案。

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