如果“onChange”不提供 e.target.name，如何区分 <Select /> 组件？答案

【问题标题】：How to differentiate between <Select /> components if "onChange" does't provide e.target.name?如果“onChange”不提供 e.target.name，如何区分 <Select /> 组件？
【发布时间】：2018-07-31 11:29:22
【问题描述】：

我的表单中有多个 select 组件。如果我无法访问e.target.name，如何区分它们

onChange={this.handleSelect}   
//onChange passes just a value to handleSelect.

这里是select组件的引用 https://ant.design/components/select/

我不想为每个选择组件创建多个handleSelectField。

【问题讨论】：

您可以只拥有state = { firstSelect: '', secondSelect: '' }，然后拥有两个独立的功能。例如。 onChange={(value) => setState({ firstSelect: value })} 和 onChange={(value) => setState({ secondSelect: value })}
是的，我明白了，但这就是我要说的：“我不想为每个选择组件创建多个 handleSelectField”
是的，我看到了，但是如果没有单独的处理程序，您将无法区分两者。如果您绝对不想创建多个处理程序，则可以执行 onChange={(value) => this.myHandler(value, 'firstSelect')} 之类的操作，但这比它的价值更麻烦。
这看起来不错。谢谢

标签： html reactjs antd

【解决方案1】：

创建单独的事件处理程序没有任何问题，但如果您绝对不想这样做，您可以将要更新的值发送给事件处理程序。

示例

class App extends React.Component {
  state = { firstSelect: null, secondSelect: null };

  handleChange = (value, field) => {
    this.setState({ [field]: value });
  };

  render() {
    return (
      <div>
        <Select onChange={value => this.handleChange(value, "firstSelect")} />
        <Select onChange={value => this.handleChange(value, "secondSelect")} />
      </div>
    );
  }
}

【讨论】：