ReactJS：如何在下拉菜单中执行多项选择？

Question

我已经为单个选择开发了下拉选择。现在我想将其设为多项选择。如何在 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>
        );
    }
}

Answer 1

对于多选，你可以试试下面的插件

https://github.com/JedWatson/react-select

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
      />
    );
  }
}

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

https://medium.com/@nidhinkumar/react-select-852e90d549df