ReactJS：如何在下拉列表中执行多项选择？

我已经为单个选择开发了下拉选择。现在我想让它成为多重选择。如何在API响应中传递多个ID

我的单选工作代码如下：

class Xyz extends React.Component {
    constructor(props) {
        super(props);
        this.state = {id: props.defaultValue.id, name: props.defaultValue.name, open: true};
    }
    updateData = () => {
        console.log(this.state.id)
        this.props.onUpdate({id: this.state.id, name: this.state.name});
        api.request({url: `/api-route/${this.props.id}`, method: 'put', data: {[this.field]: this.state.id} })
            .then(res => (`${this.field} have been updated`)
            .catch(er => console.log(er));
    }
    render() {
        return (
            <React.Fragment>
                <select
                    multiple={true}
                    defaultValue={[this.props.defaultValue.id]}
                    onChange={ev => this.setState({ id: ev.target.value, name: ev.nativeEvent.target[ev.nativeEvent.target.selectedIndex].text })}>
                    {this.props[this.field].map((name, index) => <option key={index} value={index}>{name}</option>)}
                </select>
                <button type='button' className='btn btn-primary' onClick={this.updateData}>Save</button>
            </React.Fragment>
        );
    }
}

Xyz类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={id:props.defaultValue.id，name:props.defaultValue.name，open:true}；
}
更新数据=（）=>{
console.log（this.state.id）
this.props.onUpdate（{id:this.state.id，name:this.state.name}）；
请求（{url:`/api route/${this.props.id}'，方法：'put'，数据：{[this.field]：this.state.id}）
.then（res=>（`${this.field}已更新`）
.catch（er=>console.log（er））；
}
render（）{
返回(
this.setState（{id:ev.target.value，名称：ev.nativeEvent.target[ev.nativeEvent.target.selectedIndex].text}）}>
{this.props[this.field].map（（名称，索引）=>{name}）
拯救
);
}
}

对于多个选择，您可以尝试以下插件

const options=[]；
类应用程序扩展了React.Component{
状态={
selectedOption:null，
}
建造师（道具）{
超级（道具）；
this.props[this.field].map（（名称、索引）=>{
push（{value:index，label:name}）；
});
}
handleChange=（selectedOption）=>{
this.setState（{selectedOption}）；
log（`Option selected:`，selectedOption）；
}
render（）{
const{selectedOption}=this.state；
返回(
);
}
}

要了解有关react的更多信息，请查看下面的帖子

---

在这种情况下，我如何传递像这样的由pluginOkay处理的选项属性

{name}

@aananddham，那么我应该在

options={options}

中传递什么呢？它如何获得

{name}

value？我已经在你的中型博客上查看了你的最新答案；你能用我的代码更新它吗？让我们看看。

const options = [];  

 class App extends React.Component {
  state = {
    selectedOption: null,
  }

  constructor(props) {
    super(props);
    this.props[this.field].map((name, index) => {
      options.push({ value: index, label: name });
    });
  }
  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
        isMulti
      />
    );
  }
}