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