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

问题描述

我可以传递状态并且仅使用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}
/>
...

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

func（状态，值）

如果我可以访问projectInformationDetails的属性而又不将所有内容都克隆回来，则代码可能会更干净。

例如：

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

解决方法

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

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

然后，每次要与按键配合使用时，调用此函数。

<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')}
/>

,

如果是所有输入字段，则可以向输入标签添加一个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,[property]: e.target.value,});

...

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