如何将 useState 挂钩传递给父组件并更新对象？

Question

我在 React 中有一个用户组件和一个 InputField 组件。我知道我的代码是错误的，但它应该显示我打算做什么。我不想为每个属性用户设置多个 useState 挂钩，而是想更新一个用户对象，其中输入字段可以更新用户对象的特定属性。

const User = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
  });

  return (
    <>
      <InputField
        name="name"
        value={user.name}
        onChange={() => setUser({ ...user, name: value })}
      />
      <InputField
        name="email"
        value={user.email}
        onChange={() => setUser({ ...user, email: value })}
      />
    </>
  );
};

const InputField = ({ name, value }) => {
  const [value, setValue] = useState("");
  return (
    <input
      type="text"
      id={name}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

我认为我对 value 道具所做的是正确的，但 onChange 不正确，这是我的问题。我怎样才能将 setValue 传递给用户组件，以便它更新名称或电子邮件？

Answer 1

您没有从 InputField 组件中的道具获得 onChange。

const InputField = ({ name, value, onChange }) => {
  return (
    <input
      type="text"
      id={name}
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
};

然后需要获取子组件传入的值：

<InputField
  name="name"
  value={user.name}
  onChange={(value) => setUser({ ...user, name: value })}
/>
<InputField
  name="email"
  value={user.email}
  onChange={(value) => setUser({ ...user, email: value })}
/>

我认为这应该可以解决。

Answer 2

您需要将 onchange 逻辑移至父组件。因此，您可以在父级中创建一个 onchange 函数并将其传递给输入字段。此外，我只会使用目标名称属性来设置状态，而不是在输入上设置 id。所以像下面这样：

const InputField = ({ name, value, onChange }) => {
  return (
    <input
      type="text"
      name={name}
      value={value}
      onChange={onChange}
    />
  );
};


const User = () => {
  const [user, setUser] = useState({
    name: "",
    email: "",
  });

  const onChange = (e) => {
    setUser({
      ...user,
      [e.target.name]: e.target.value
    })
  }

  return (
    <>
      <InputField
        name="name"
        value={user.name}
        onChange={onChange}
      />
      <InputField
        name="email"
        value={user.email}
        onChange={onChange}
      />
    </>
  );
};

如何将 useState 挂钩传递给父组件并更新对象？

How to pass a useState hook to the parent component and update an object?

javascript

reactjs

react-props