我可以使用一个函数来改变 React 中的不同状态吗？

Question

我可以传递状态并且只使用 1 个函数而不是为每个状态属性调用一个函数吗？

组件状态：

this.state =
{
  context: this.props.context,
  dataProvider: this.props.dataProvider,
  projectInformationDetails: {
    programName: "",
    projectName: "",
    projectStatus: "",
    projectStatusOptions: [],
    appStatus: "",
    appStatusOptions: [],
    governanceStatus: "",
    governanceStatusOptions: []
  },
};

输入改变时改变状态的函数：

private async setProgramName(e) {
    await this.setState(prevState => ({
        projectInformationDetails: {
            ...prevState.projectInformationDetails,
            programName: e.target.value,
        }
    }));

    this.props.updateProjectItem(this.state.projectInformationDetails);
}

private async setProjectName(e) {
   await this.setState(prevState => ({
      projectInformationDetails: {
         ...prevState.projectInformationDetails,
         projectName: e.target.value,
      }
   }));

   this.props.updateProjectItem(this.state.projectInformationDetails);
}
...

渲染中的文本组件：

<TextField
    label={strings.ProgramNameLabel}
    defaultValue={this.state.projectInformationDetails.programName}
    onChange={this.setProgramName}
/>
<TextField
     label={strings.ProjectNameLabel}
     defaultValue={this.state.projectInformationDetails.projectName}
     onChange={this.setProjectName}
/>
...

因此，我不想为每个状态使用几乎相同的函数，而只想使用一个函数：

函数（状态，值）

如果我可以访问 projectInformationDetails 的属性而不克隆所有内容，也许代码会更简洁。

例如：

this.setState( {projectInformationDetails.programName: value});

Answer 1

如果是所有输入字段，您可以在输入标签中添加一个name 键。它看起来像<input type="text" name="programName" value={programName} /> 然后，名称值将对应于您尝试在状态中更改的键。

有了这个，你应该能够创建一个通用函数来设置状态值。

const onInputChange = (e) => this.setState({
  ...this.state,
  projectInformationDetails: {
    ...this.state.projectInformationDetails,
    [e.target.name]: e.target.value,
  },
});

并在输入字段的onChange上使用此功能。

我已经有一段时间没有在 React 中使用类了，所以可能需要进行一些修改。

编辑：

您可以通过在onChange 函数中添加值并通过返回另一个函数将函数用作一等公民来合并@David Barker 的部分答案。

const onChange = (property) => (e) => this.setState({
  ...this.state,
  projectInformationDetails: {
    ...this.state.projectInformationDetails,
    [property]: e.target.value,
  },
});

...

<TextField
    label={strings.ProjectNameLabel}
    defaultValue={this.state.projectInformationDetails.projectName}
    onChange={onChange('programName')}
/>

Answer 2

您可以从单个方法中组合每个事件处理程序，我不确定这样做是否会产生渲染开销，因为 React 无法跟踪事件处理程序，如果可以，您总是可以分配结果到componentDidMount中的变量。

private setComponentState(key) {
    const self = this;
    return (e) => {
        self.setState(prevState => ({
            projectInformationDetails: {
                ...prevState.projectInformationDetails,
                [key]: e.target.value,
            }
        }))
    };
}

然后每次你想和key一起使用时调用这个函数。

<TextField
    label={strings.ProgramNameLabel}
    defaultValue={this.state.projectInformationDetails.programName}
    onChange={this.setComponentState('programName')}
/>

<TextField
    label={strings.ProjectNameLabel}
    defaultValue={this.state.projectInformationDetails.projectName}
    onChange={this.setComponentState('projectName')}
/>