React Hooks 使用多個鍵更改對象的單個值而不重復

Question

我試圖找到一種更簡潔的方法來處理這種模式，我在處理表單字段的更改時不斷遇到 react。

對於我處理值更改的表單對象的每個元素，我發現自己使用 useState() 的 setter 函數復制了相當多的這種模式。 我已經嘗試了一些事情，比如創建 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>
  );
}