javascript - 如何从 e.target.name 更新对象状态

Question

我正在尝试从这样的表单中输入数据 -

<h1>Company Position</h1>
<input
    name="company.position"
    type="text"
    onChange={(e) => functions.setData(e)}
    value={data.company.position}
/>

进入这样的状态对象 -

const [ form, setValues ] = useState({
    name        : 'Jo Smith',
    email       : 'JoSmith@domain.com',
    phone       : null,
    company     : {
        name     : null,
        position : null
    }
});

在传入目标时使用 handleStateChange 函数

const handleStateChange = (e) => {
    e.preventDefault();
    setValues({
        ...form,
        [e.target.name]: e.target.value
    });
};

我似乎无法更新状态内的公司对象，我假设它会将 company.name 识别为目标名称。

如有任何帮助，我们将不胜感激。

Answer 1

e.target.name 是 company.position，你不能设置像 obj["company.position"] 这样的嵌套属性，你必须拆分它:

<input
  name="company.position"
  type="text"
  onChange={e => functions.setData(e)}
  value={data.company.position}
/>;

const handleStateChange = e => {
  e.preventDefault();
  const [section, key] = e.target.name.split(".");

  // section is : company
  // key is : position

  if (key) {
    // if you have nested keys to update
    setValues({
      ...form,
      [section]: {
        ...form[section],
        [key]: e.target.value
      }
    });
  } else {
    // if you're updating on the first level
    setValues({
      ...form,
      [section]: e.target.value
    });
  }
};