reactjs - 如何在reactjs中使用MDBSelect在下拉列表中使用“全选”选项？

Question

如何使用 MDBootstrap 在下拉列表中添加“全选”选项，这将选择下拉列表的所有选项。我已经使用了下面的代码，但不幸的是它不起作用。我已经使用 Select All 函数将它传递给 MDBSelect。

class DropDowm extends Component {
      constructor(props) {
        super(props)
        this.state = { data: this.prepareData(peops.data)} //data is in array form
      }
    
    prepareData = (data) => {
       
        var mapper = data.map(x => {
          return {value: x, display: x}
        })
        return [{value: 'selectAll', display: 'Select All'}].concat(mapper)
    
       }
    
      toggleAll = (checked) => {
        const {data} = this.state;
        for (var i = 1; i <= data.length; i++){
          data[i].checked = checked;
        }
        this.setState({data}); 
        
      };
    
      handleChange = (value,checked) => {
        console.log("in handle change", value,checked)
        if (value === "selectAll") {
       this.toggleAll(value, checked)
        }
      };
    
    
    render() {
    return (
    
    <div className="col-sm-3 px-2">
              <label>Select the data</label>
              <MDBSelect data = {this.state.data} getValue={(value, checked)=>{this.handleChange(value, checked)}} multiple>
              <MDBSelectInput selected = "Select" />
              <MDBSelectOptions>
                {this.state.data.map((ques) => {
                  return(
                  <MDBSelectOption value = {ques.value}>{ques.display}</MDBSelectOption>
                  )
                })}
              </MDBSelectOptions>
             </MDBSelect> 
                
            </div>
    )
    }
    }

标签： reactjsreact-bootstrap