react+antd:在Form中使用Dropdown

在antd的官方实例中，一个简单的Dropdown是这样的

render(){
    const menu = (
      <Menu>
        <Menu.Item>
          <a target="_blank" href="http://www.alipay.com/">1st menu item</a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" href="http://www.taobao.com/">2nd menu item</a>
        </Menu.Item>
        <Menu.Item>
          <a target="_blank" href="http://www.tmall.com/">3rd menu item</a>
        </Menu.Item>
      </Menu>
    );

    return(
      <Dropdown overlay={menu}>
        <span>下拉选框</span>
      </Dropdown>   
    )
}

如果要在Form中加入Dropdown组件，并且在组件的点击事件中附带表单信息，这时就需要将{menu}改写为{ () => { } }一个回调函数来实现。

最近一个项目的需求就是点击下拉选框中的详情，然后路由跳转到详情页，在路由中需要带上这条FormList的id，此时用上面这种方法是行不通的，

const menu = (<Menu>
    <Menu.Item>
      <span onClick={this.detail(record)}>详情</span>
    </Menu.Item>
</Menu>);

因为此时的参数record是undefined，因此需要将menu写进overlay的回调函数中去。

<Dropdown overlay={ () => {
    return (<span onClick={this.click(record)}>详情</span>)
} }>
    <span>更多</span>
</Dropdown>

项目中还需要判断FormList的状态。根据每条数据的状态不同显示不同的下拉选框，下面附上代码

render(){
    const columns = [
        {
           title: '项目',
           dataIndex: 'projectName',
           key: 'projectName',
        },
        {
            render: record => {
                return (
                    <div>
                    {<Dropdown 
                       overlay={()=>{
                         if(record.type1 === ''){
                            return (<Menu>
                                     <Menu.Item>type1</Menu.Item>
                                    </Menu>)
                         }else if(record.type2 === ''){
                            return (<Menu>
                                      <Menu.Item key="0">
                                         <a target="_blank">type2</a>
                                      </Menu.Item>
                                      <Menu.Item key="1">
                                         <a target="_blank" onClick={() => this.click(record)}>详情</a>
                                      </Menu.Item>
                                    </Menu>)
                         }else{
                            return(<Menu>
                                     <Menu.Item key="0">
                                         <a target="_blank">type3 </a>
                                     </Menu.Item>
                                     <Menu.Item key="1">
                                         <a target="_blank" onClick={() => this.click(record)}>详情</a>
                                     </Menu.Item>
                                     <Menu.Item key="2">
                                         <a target="_blank">type3 </a>
                                     </Menu.Item>
                                   </Menu>)
                          }
                     }}>
                   <span>下拉选框</span>
                   </Dropdown>}
                </div>
             );
            }
        }];

    return (
        <Table dataSource={tableData} columns={columns} />
    )
}