antdesign解决select没有全选功能

SelectAll组件:

 import React from 'react'
import { Select } from 'antd'
class SelectAll extends React.Component{
    constructor(props){
        super(props)
    }
    componentDidMount(){
        // console.log(this.props.children)
    }
    componentDidUpdate(){
        console.log(this.props.children)
    }
    onChange=(key,item)=>{
        if(key.includes('all')){
            if(this.props.value.length===this.props.children.length){
                this.props.onChange([])
            }else{
                let keyArr = this.props.children.map(x=>{
                    return x.key
                })
                this.props.onChange(keyArr)
            }
        }else{
            this.props.onChange(key)
        }
    }
    render(){
        return (
            <Select maxTagCount={2} mode="multiple" {...this.props} onChange={this.onChange}>
                <Select.Option key ="all">
                    全选
                </Select.Option>
                {this.props.children}
            </Select>
        )
    }
}
export default SelectAll

引用SelectAll组件：

changeSelect=(arr)=>{
        this.setState({
            selectAll : arr
        })
    }
<SelectAll value={this.state.selectAll} onChange={this.changeSelect} style={{width : 200}}>
                    {this.roomTypes.map(item=>(
                        <Select.Option key={item.productId.toString()}>
                            {item.productName}
                        </Select.Option>
                    )) }
                </SelectAll>