我将如何重新使用这些功能而不是每个文本字段一个？

Question

我正在使用 SPO 学习 spfx。我有一个包含多个文本字段的表单。我有 2 class 个组件。（A 和 B）每次输入 (B) 上的文本字段时，函数都会将 return 发送到 props 文件。（我相信这叫做提升状态）。这些道具随后被 (A) 中的处理函数使用，因此无论输入什么都可以由 (A) 提交给 SP 列表。这一切都很好。但我注意到我正在为每个文本字段创建函数。有人可以告诉我一种重新使用功能的方法。这是 (B) 中的函数之一：

private _onJobTitleChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      JobTitle: newValue
    });
  }

这是 (A) 中的处理函数：

private _onJobTitleChange = (ev: React.FormEvent<HTMLInputElement>, newValue?: string) => {
    this.setState({
      JobTitle: newValue
    });
  }

如您所见，处理函数设置了状态，以便可以将其提交到列表。

如果你需要，这里是道具文件：

export interface IEvalReqNewProps {
  context: WebPartContext;
  description: string;
  jobTitleReportTo: string;
  onJobTitleReportToChange(value: string ): void;
  jobTitleReportToNum: string;
  onJobTitleReportToNumChange(value: string ): void;
  propGradeChange: string;
  onPropGradeChange(value: IDropdownOption): void;
  compPosTit1: string;
  onCompPostTit1Change(value: string ): void;
  compPosTit2: string;
  onCompPostTit2Change(value: string ): void;
  compPosTit3: string;
  onCompPostTit3Change(value: string ): void;

您可以看到我正在为这些字段创建多个函数，而且它变得越来越乱。我会很感激一个代码示例，而不是描述要做什么。非常感谢 :)

Answer 1

我相信你可以这样处理：

public handleMultipleFields = (field: string, value: string) => {
    const { foo } = this.state;
    this.setState({ [field]: value });
  };

ReactJS Docs

另一个例子，如果你必须更新状态中的某些对象：

public handleObjectWithMultipleFields = (field: string, value: string) => {
    const { myObject } = this.state;
    this.setState({ myObject: { ...myObject, [field]: value } });
  };

我将如何重新使用这些功能而不是每个文本字段一个？

How would I re-use these functions instead of having one per textfield?

typescript

reactjs

spfx