Используйте значение проп при установке значения объекта useState

Question

Я использую реагирующие хуки, использую состояние для обновления объекта. У меня есть компонент многократного использования, который является просто входом, которому я передаю реквизиты, и обработчик 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 }) } />
  );
};

Вот файл, в котором я передаю реквизиты на три входа

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 }) }

Вот песочница, чтобы вы могли поиграть с ней: https://codesandbox.io/s/exciting-ritchie-ijxxb

Answer 2

вы получили свой ответ ... но я бы посоветовал вам лучше подойти к этому.

Входной компонент:

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())
      } } />
  );
};

и для вашего 3-компонентного кода -

const InputGroup = props => {
  // initial state
  const [fields, setFields] = useState([
    { value: 0, placeHolder: 'foo1' }
    { value: 0, placeHolder: 'foo2' }
    { value: 0, placeHolder: 'foo3' }
  ]);

  return (
    <div>
      {
        foos.map((element, index) => {
          <Input
            key={index}
            index={ index }
            fields={ fields }
            setFields={ setFields }
          />
        })
      }
    </div>
  );
}

спроси если не понятно

Answer 3

Вы захотите заключить fooType в [], чтобы установить переменную в качестве значения ключа.

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

Что касается того, как вы пишете это прямо сейчас, то fooType интерпретируется как новое значение ключа. Но вышеупомянутое изменение должно это исправить.