javascript - 多选reactjs handlechange

Question

我有3个这样的选择

    const { selectedOption , selectedOption2, selectedOption3} = this.state;
    const value = selectedOption && selectedOption.value;
    const value2 = selectedOption2 && selectedOption2.value;
    const value3 = selectedOption3 && selectedOption3.value;
    <Select
       name="form-field-name1"
       value={value}
       onChange={this.handleChange}
       options={[
           { value: 'Ados et jeunes', label: 'One' },
           { value: 'Pêche à la truite', label: 'Two' },
              ]}
          />
     <Select
      name="form-field-name2"
      value={value2}
      onChange={this.handleChange}
      options={[
       { value: 'XXXX', label: 'OneX' },
       { value: 'XXXXXX', label: 'TwoX' },
     ]}
    />
   <Select
     name="form-field-name3"
     value={value3}
     onChange={this.handleChange}
     options={[
      { value: 'rrrrrr', label: 'Oner' },
      { value: 'rrrrrrrr', label: 'Twor' },
      ]}
   />

当我不知道如何使用 handlechange 更改值时

handleChange(selectedOption) {
    this.setState({ selectedOption });
    console.log(`Selected: ${selectedOption.label}`);
  }

如何在同一函数中更新选择选项 2 和 3

Answer 1

在您的 handleChange 函数中，您需要发送选择字段的 id，其值更改为 onChange={(selectedOption) => this.handleChange(selectedOption, 'selectedOption2')}

   <Select
       name="form-field-name1"
       value={value}
       onChange={(selectedOption) => this.handleChange(selectedOption, 'selectedOption')}
       options={[
           { value: 'Ados et jeunes', label: 'One' },
           { value: 'Pêche à la truite', label: 'Two' },
              ]}
          />
     <Select
      name="form-field-name2"
      value={value2}
      onChange={(selectedOption) => this.handleChange(selectedOption, 'selectedOption2')}
      options={[
       { value: 'XXXX', label: 'OneX' },
       { value: 'XXXXXX', label: 'TwoX' },
     ]}
    />
   <Select
     name="form-field-name3"
     value={value3}
     onChange={(selectedOption) => this.handleChange(selectedOption, 'selectedOption3')}
     options={[
      { value: 'rrrrrr', label: 'Oner' },
      { value: 'rrrrrrrr', label: 'Twor' },
      ]}
   />

然后你可以像 handleChange 函数一样

handleChange(selectedOption, key) {
    this.setState({ [key]: selectedOption });
}

你也可以看看How to avoid binding in render method在不使用箭头函数的情况下获得相同的结果