React Antd Select组件 自定义下拉内容(dropdownRender扩展菜单) 点击事件没有响应

React Antd Select组件 自定义下拉内容(dropdownRender扩展菜单) 点击事件没有响应

转载源地址

官方给出的示例是，在提供菜单的同时又补充了一个Add item。

页面效果无误，但是在添加点击事件时发现并不能触发点击事件

<Select
    dropdownRender={menu => (
        <div>
            {menu}
            <Divider style={{ margin: '4px 0' }}/>
            <div style={{ padding: '8px', cursor: 'pointer' }} onClick={()=>{console.log(206)}}>
                <Icon type='plus' />添加单位
            </div>
        </div>
    )}
>
    {this.state.engineeringOwner.length>0?this.state.engineeringOwner.map(item => {
        return (<Option value={item.Id}>{item.Name}</Option>)
    }):null}
</Select>

最终在Issues中找到了答案，即：在select组件外部包一层div，将鼠标默认事件注释掉

<div onMouseDown={(e) => {
    e.preventDefault();
    return false;
}}>
    <Select
        dropdownRender={menu => (
            <div>
                {menu}
                <Divider style={{ margin: '4px 0' }}/>
                <div style={{ padding: '8px', cursor: 'pointer' }} onClick={()=>{console.log(206)}}>
                    <Icon type='plus' />添加单位
                </div>
            </div>
        )}
    >
        {this.state.engineeringOwner.length>0?this.state.engineeringOwner.map(item => {
            return (<Option value={item.Id}>{item.Name}</Option>)
        }):null}
    </Select>
</div>

如果你的select在表单中，你需要把div包在getFieldDecorator外面

<FormItem label='监理单位'>
    <div onMouseDown={(e) => {
        e.preventDefault();
        return false;
    }}>
        {getFieldDecorator('EngineeringSupervisor',{
            rules:[{required:true,message:'监理单位不能为空!'}]
        })(

            <Select
            dropdownRender={menu => (
                <div>
                    {menu}
                    <Divider style={{ margin: '4px 0' }}/>
                    <div style={{ padding: '8px', cursor: 'pointer' }} onClick={()=>{this.setState({groupAddVisible:true})}}>
                        <Icon type='plus' />添加单位
                    </div>
                </div>
            )}
        >
            {this.state.engineeringSupervisor.length>0?this.state.engineeringSupervisor.map(item => {
                return (<Option value={item.Id}>{item.Name}</Option>)
            }):null}
        </Select>
        )}
    </div>
</FormItem>

        }):null}
    </Select>
    )}
</div>

```