React表单点击自动填充按钮后输入框未同步更新问题排查

核心原因 #

你的输入框属于非受控组件——只通过onChange更新状态，但没有将状态值绑定到输入框的value属性。React无法通过状态变化驱动输入框的显示更新：用户手动输入时，DOM自身会更新显示内容，但自动填充是直接修改状态，不会同步到输入框DOM。

另外代码里还有一个字段对应错误：

• 第二个输入框占位符是"Salary?"，但onChange里更新的是job字段
• 第三个输入框占位符是"Job?"，但onChange里更新的是salary字段
  这会导致手动输入时状态与实际内容不匹配，也需要一并修复。

修复后的代码 #

import { useState } from 'react';

function Form() {
  const [formInput, updateFormInput] = useState({
    name: "",
    job: "",
    salary: "",
  });

  const handleClick = () => {
    updateFormInput({
      ...formInput,
      name: "Me",
      job: "My Job",
      salary: "My Salary",
    });
  };

  return (
    <div>
      <input
        placeholder="Name?"
        value={formInput.name} // 绑定状态值到输入框
        onChange={(e) =>
          updateFormInput({ ...formInput, name: e.target.value })
        }
      />
     
      <input
        placeholder="Salary?"
        value={formInput.salary} // 修正字段绑定，同步状态与输入框
        onChange={(e) =>
          updateFormInput({ ...formInput, salary: e.target.value })
        }
      />

      <input
        placeholder="Job?"
        value={formInput.job} // 修正字段绑定，同步状态与输入框
        onChange={(e) =>
          updateFormInput({ ...formInput, job: e.target.value })
        }
      />

      <button onClick={handleClick}>  
        Autofill
      </button>
    </div>
  );
}

export default Form;

原理说明 #

给输入框添加value={formInput.xxx}后，输入框就变成了受控组件：输入框的显示值完全由React状态控制。此时无论是用户手动输入触发onChange更新状态，还是点击按钮修改状态，React都会自动将最新的状态值同步到输入框的显示中，实现状态与视图的双向绑定。

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