时间戳

首页 > 解决方案 > 在 onChange 事件中结合两个不同但非常相似的函数

reactjs - 在 onChange 事件中结合两个不同但非常相似的函数

问题描述

我有两个非常相似的下拉菜单，都有一个“onChange”事件：

    <Dropdown
      items={employeeNames}
      selection={employeeNames.name}
      onChange={this.handleEmployeeNamesChange}
    />
    <Dropdown
      items={employeeTypes}
      selection={employeeType.name}
      onChange={this.handleEmployeeTypeChange}
    />

有没有办法可以将这两个handleChange功能组合成一个功能：

  handleEmployeeNameChange = newVal => {
    const newState = { ...this.state, employeeNames: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
  };

  handleEmployeeTypeChange= newVal => {
    const newState = { ...this.state, employeeTypes: newVal };
    this.setState({ ...newState, isValid: getValidation(newState) });
  };

标签： reactjs

解决方案

您可以创建一个方法来组合您的更改并传递参数。

最终目标是更新key您的权限state，使用此键作为参数。

<Dropdown
  items={employeeNames}
  selection={employeeNames.name}
  onChange={v => this.handleChangeDropdown("employeeNames",v)}
/>
<Dropdown
  items={employeeTypes}
  selection={employeeType.name}
  onChange={v => this.handleChangeDropdown("employeeTypes",v)}
/>

handleChangeDropdown = (key,newVal) => {
  this.setState({
     [key]:newVal,
     isValid: getValidation(newState)
  })
};

推荐阅读