Question

我正在使用react钩子useState更新对象。我有一个可重用的组件，它只是我要传递道具的输入，还有一个用于更新状态的onChange处理程序。

如何使用prop值“ 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 }) } />
  );
};

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

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被解释为新的键值。但是上述更改应该可以解决它。

Answer 2

在[fooType]中添加方括号以使其成为对象键

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

这里有一个沙箱，因此您可以使用它：https://codesandbox.io/s/exciting-ritchie-ijxxb

Answer 3

您得到了答案。但我建议您采用更好的方法。

输入组件：

export const SortValues = {
  NEWER: 'NEWER',
  OLDER: 'OLDER',
  NAME_ASC: 'NAME_ASC',
  NAME_DESC: 'NAME_DESC',
} as const

以及您的3个组件代码-

const Input = props => {
  const { index, fields, setFields } = props;

  return (
    <input type='text'
      placeholder={ fields[index].placeHolder }
      value={ fields[index].value }
      onChange={ e => {
        let fieldsCopy = fields.slice()        // shallow copy
        fields[index].value = e.target.value
        setFields(fieldsCopy.slice())
      } } />
  );
};

询问是否不清楚

设置useState对象值时使用prop值

3 个答案: