在 React 中填写复杂表单时设置对象属性的最佳方法是什么

Question

我是 React 的新手。我有一个看似标准的任务：填写有关用户的表单数据并将其发送到服务器。表单是一组组件，如：基本信息、护照资料、爱好等+保存按钮。

我是通过以下方式做到的。有一个 class 描述该模型。创建组件时，我在useRef 中创建了这个class 的实例。此外，我通过它们的道具将这个model 变量传递给所有子组件。模型属性填充在组件中。所以当我点击Save 按钮时，我已经填写了模型属性。Here's an example。

请告诉我，这是填充复杂对象数据的好方法吗？也许以不同的方式做会更好？有没有最佳实践？也许我应该使用 redux 来完成这项任务？

model.ts

 class Model {
      // Component 1
      firstName: string;
      lastName: string;
    
      // Component 2
      passport: string;
      address: string;
    }
    
    interface IComponent {
      model: Model;
    }
    
    export { Model, IComponent };

index.tsx

export const App: React.FunctionComponent<{}> = () =>
{
 const model = useRef<Model>(new Model());

 const save = () =>{
   console.log(model.current);
 }

return (
  <React.Fragment>
    <Component1 model={model.current} />
    <Component2 model={model.current} />
    <button onClick={save}>Сохранить</button>
  </React.Fragment>
);
}
render(<App />, document.getElementById('root'));

Component1.tsx

export const Component1: React.FunctionComponent<IComponent> = ({ model }) => {

  const [firstNameValue, setFirstNameValue] = useState(model.firstName);
  const [lastNameValue, setLastNameValue] = useState(model.lastName);

  const changeFirstName = (e: React.ChangeEvent<HTMLInputElement>) => {
      model.firstName = e.target.value;
      setFirstNameValue(e.target.value);
  }

  const changeLastName = (e: React.ChangeEvent<HTMLInputElement>) => {
      model.lastName = e.target.value;
      setLastNameValue(e.target.value);
  }

  return (
  <React.Fragment>
   <div>
    <label htmlFor="firstName">FirstName:</label>
    <input name="firstName" value={firstNameValue} onChange={changeFirstName} />
   </div>
   <div>
    <label htmlFor="lastName">LastName:</label>
    <input name="lastName" value={lastNameValue} onChange={changeLastName}/>
   </div>
  </React.Fragment>);
};

Component2.tsx

export const Component2: React.FunctionComponent<IComponent> = ({ model }) => {
   const [passportValue, setPassportValue] = useState(model.passport);
   const [addressValue, setAddressValue] = useState(model.address);

  const changePassport = (e: React.ChangeEvent<HTMLInputElement>) => {
      model.passport = e.target.value;
      setPassportValue(e.target.value);
  }

  const changeAddress = (e: React.ChangeEvent<HTMLInputElement>) => {
      model.address = e.target.value;
      setAddressValue(e.target.value);
  }

  return (
  <React.Fragment>
   <div>
    <label htmlFor="passport">Passport:</label>
    <input name="passport" value={passportValue} onChange={changePassport} />
   </div>
   <div>
    <label htmlFor="address">Address:</label>
    <input name="address" value={addressValue} onChange={changeAddress}/>
   </div>
  </React.Fragment>);
};

Answer 1

我不会为此推荐 redux。 Redux 解决了将数据提供给整个应用程序的问题，但我们的表单是独立的，因此它不是适合这项工作的工具。如果表单开始变得非常复杂，您可能会考虑为表单使用 Context，但现在没有必要。

您想要的是将表单状态存储在表单的顶层并传递给特定组件。您不希望各个组件管理自己的状态。

我看不到将class 用于表单数据的好用例。您想将数据存储在interface 中。如果你以后需要一个类，你可以从数据接口构造它。

export interface Model {
  firstName: string;
  lastName: string;
  passport: string;
  address: string;
}

我们不使用useRef 来存储类实例，而是使用useState，它最多允许同时存储更新的表单数据。我的第一直觉是状态类型必须是Partial<Model>，因为我们一开始所有字段都是空的。但是由于这些都是string字段，我们可以创建一个initialModel，每个属性都有空字符串，是一个完整的Model。

const initialModel: Model = {
  firstName: "",
  lastName: "",
  passport: "",
  address: ""
};

const [model, setModel] = useState<Model>(initialModel);

Component1 和Component2 需要获得当前的model 作为道具，他们还需要获得更新模型的方法。我们可以将setModel 作为prop 传递，这很好，但我们最终会重复逻辑，因为每次调用setModel 来更新单个属性时我们都必须编写{...model,。

相反，我们可以创建并传递一个更新单个属性的辅助函数。此函数采用 property 的名称和我们将其设置为的新 value。

const setProperty = (property, value) => {
  setModel({
    ...model,
    [property]: value
  });
};

我不知道你的打字稿知识有多先进。如果Model 有不同的字段和不同的值类型，我们会希望使用generic 来确保值的类型与属性匹配。

export type SetPropertyFunction = <T extends keyof Model>(
  property: T,
  value: Model[T]
) => void;

但由于我们所有的值在这里都是string，所以我们可以使用更简单的东西。

export type SetPropertyFunction = (
  property: keyof Model,
  value: string
) => void;

我们的子组件将收到的 props 是 model 和 setProperty 回调。

export interface ComponentProps {
  model: Model;
  setProperty: SetPropertyFunction;
}

export type FormComponent = React.FunctionComponent<ComponentProps>;

完整的应用组件

export const App: React.FunctionComponent<{}> = () => {
  const [model, setModel] = useState<Model>(initialModel);

  const setProperty: SetPropertyFunction = (property, value) => {
    setModel({
      ...model,
      [property]: value
    });
  };

  const save = () => {
    console.log(model);
  };

  return (
    <React.Fragment>
      <Component1 model={model} setProperty={setProperty} />
      <Component2 model={model} setProperty={setProperty} />
      <button onClick={save}>Сохранить</button>
    </React.Fragment>
  );
};

现在为Component1 和Component2。他们不再管理任何内部状态。
他们可以从模型中获取每个字段的value：model.firstName。在onChange 处理程序中，我们使用property 的名称调用我们的setProperty 助手。

const changeFirstName = (e: React.ChangeEvent<HTMLInputElement>) => {
  setProperty("firstName", e.target.value);
};

const changeLastName = (e: React.ChangeEvent<HTMLInputElement>) => {
  setProperty("lastName", e.target.value);
};

这些回调非常简单，我们也可以内联编写它们。

onChange={e => setProperty("firstName", e.target.value)}

我们的组件现在只处理展示。我是separation of concerns，很好！

完成组件1

export const Component1: FormComponent = ({ model, setProperty }) => {
  return (
    <React.Fragment>
      <div>
        <label htmlFor="firstName">FirstName:</label>
        <input
          name="firstName"
          value={model.firstName}
          onChange={e => setProperty("firstName", e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="lastName">LastName:</label>
        <input
          name="lastName"
          value={model.lastName}
          onChange={e => setProperty("lastName", e.target.value)}
        />
      </div>
    </React.Fragment>
  );
};

StackBlitz Link