Javascript 在下拉菜单中选择所有功能（使用ReactJS和MDbootstrap ui）

我正在使用Reactjs和Mdbootstrap开发用户界面。在本项目的 有“下拉选项”可供选择，我需要添加“全选”选项，单击该选项时，应在

下选择所有选项。 如何添加“选择所有”功能？这是我使用的代码

class DropDowm extends Component {
  constructor(props) {
    super(props)
    this.state = { data: this.prepareData(peops.data)}
  }

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

类DropDowm扩展组件{
建造师（道具）{
超级（道具）
this.state={data:this.prepareData（peops.data）}
}
准备数据=（数据）=>{
var mapper=data.map（x=>{
返回{value:x，display:x}
})
返回[{value:'selectAll'，display:'selectAll'}].concat（映射器）
}
TOGGALL=（选中）=>{
const{data}=this.state；
对于（var i=1；i{
log（“在句柄更改中”，值，选中）
如果（值==“选择全部”）{
this.toggleAll（值，选中）
}
};
render（）{
返回(
选择数据
{this.handleChange（值，选中）}}多个>
{this.state.data.map（（ques）=>{
返回(
{ques.display}
)
})}
)
}
}