ReactJS: ¿Cómo realizar una selección múltiple en el menú desplegable?

2022-12-01 06:25:35

He desarrollado la selección desplegable para la selección individual. Ahora quiero hacerlo como selección múltiple. ¿Cómo puedo pasar los ID múltiples en la respuesta de la API? ?

Mi código de trabajo para la selección única es así:

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

- TMA

Source
Responder


1
  • Para selecciones múltiples, puede probar el siguiente complemento

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

    Para obtener más información sobre reaccionar-seleccione, consulte la publicación a continuación

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