React Hooks изменяют одно значение объекта несколькими ключами без повторения

Question

Я пытаюсь найти более удобный способ обработки этого шаблона, с которым я сталкиваюсь с реакцией при обработке изменений для полей формы.

Для каждого элемента моего объекта формы, для которого я обрабатываю изменение значения для Я довольно часто копирую этот шаблон с помощью функции setState (). Я пробовал пару вещей, таких как создание мелких копий formState и изменение этого, но единственный способ, с помощью которого я действительно могу заставить вещи работать, - это шаблон ниже, который кажется немного повторяющимся.

 const handleTitle = evt => {
    props.setFormState({
      title: evt.target.value,
      bio: props.formState.bio,
      formExpertise: props.formState.formExpertise,
      formExpertiseYears: props.formState.formExpertiseYears
    });
  };

Answer 1

Если вы хотите включить this.props.formState, вы можете распространить объект в новое состояние. Кроме того, вы можете использовать имя входа в качестве ключа состояния, поэтому вам не нужно переписывать его для каждого ввода:

props.setFormState({
  ...this.props.formState, // copy props.formState in
  [evt.target.name]: evt.target.value // use input name as state key
});

---

Предложение:

Возможно, вы рассмотрите возможность перемещения состояние, объединяющееся в родительский компонент:

// parent component
const [formState, setFormState] = React.useState({});

const onFieldChange = (field, value) => {
  setFormState({
    ...formState,
    [field]: value
  });
}

return (
  <MyFormComponent
    formState={formState}
    onFieldChange={onFieldChange}
  /> 
);

Каждый вход может затем вызывать onFieldChange с именем и значением поля, не касаясь себя с остальной частью состояния:

function MyFormComponent ({onFieldChange}) {

  const handler = ({target: {name, value}}) => onFieldChange(name, value);

  return (
    <div>
      <input name="title" value={formState.title} onChange={handler} />
      <input name="bio" value={formState.bio} onChange={handler} />
      <input name="expertise" value={formState.expertise} onChange={handler} />
    </div>
  );
}