javascript - 设置 useState 对象值时使用 prop value

Question

我正在使用 React hooks useState 来更新对象。我有一个可重用组件，它只是一个输入，我将 props 传递给它，还有一个更新状态的 onChange 处理程序。

如何使用属性值“fooType”来动态更新状态？这在 fooType 中的 fooType 之外起作用:e.target.value` 未被识别为变量。有没有办法重构使其以这种方式工作？

输入组件:

const Input = (props) => {
  const { foo, foos, setFoos, fooType } = props;

  return (
    <input type='text'
      placeholder={ foo }
      value={ foo }
      onChange={ (e) => setFoos({ ...foos, fooType: e.target.value }) } />
  );
};

这是我将 Prop 传递给三个输入的文件

const InputGroup = (props) => {
  // initial state
  const [foos, setFoos] = useState({
    foo1: 0, foo2: 0, foo3: 0
  });

  return (
    <div>
      <Input foo={ foos.foo1 }
        fooType='foo1'
        foos={ foos }
        setFoos={ setFoos } />

      <Input foo={ foos.foo2 }
        fooType='foo2'
        foos={ foos }
        setFoos={ setFoos } />

      <Input foo={ foos.foo3 }
        fooType='foo3'
        foos={ foos }
        setFoos={ setFoos }/>
    </div>
  );
}

Answer 1

您需要将 fooType 括在 [] 中以将变量设置为键值。

onChange={ (e) => setFoos({ ...foos, [fooType] : e.target.value }) } />

按照您现在编写的方式，fooType 被解释为一个新的键值。但上述更改应该可以修复它。