我可以使用一个函数来改变 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}
/>
...

所以我不想对每个状态使用几乎相同的函数，我只想使用一个函数：

func(state, value)

如果我可以访问 projectInformationDetails 的属性而无需克隆所有内容，也许代码会更清晰。

例如：

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

Answer 1

您可以从一个方法中组合每个事件处理程序，我不确定这样做是否会产生渲染开销，因为 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')}
/>

Answer 2

如果全是输入框，可以在输入标签中加一个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 中使用 classes，所以可能需要做一些修改。

编辑：

您可以通过在 onChange 函数中添加值并通过返回另一个函数将函数用作第一个 class 公民来合并@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')}
/>

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

Can I use one function for changing different states in React?

javascript

reactjs

tsx