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

react+antd:在Form中使用Dropdown相关推荐

react+antd表格操作列加Dropdown和menu写法
需求:表格的每行操作里,有一个Dropdown组件,里面是menu组件,这里在列进行渲染的时候,把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示代码分析: 1.表格的列渲染操作列的 ...
react antd form 表单清空
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章.今天之所以写也是因为公司中秋节放假,在郑州,窗 ...
antd 函数组件_react函数组件中引用antd＜Form/＞组件demo
```xml import React, { forwardRef, useEffect } from 'react'; import { Input, Select, Row, Col, Butto ...
antd+react ---手机号校验(流程中使用)
一.背景:前端框架 react+antd 1.在form表单中输入手机号校验,并且当校验通过时,则允许表单提交数据,,未通过,则阻止该表单提交数据 ,参考 antd API ,部分代码如下: { ...
antd form rules字数限制_【React】antd的form表单的自定义校验规则的用法
在用到antd的Form组件的时候,可能会用到自定义的规则,以我的项目为例:在输入名称的时候需要请求接口,校验的内容是后台返回的内容,所以这个时候需要用到自定义的校验规则屏幕快照 2019-06-1 ...
[react] 有在项目中使用过Antd吗？说说它的好处
[react] 有在项目中使用过Antd吗?说说它的好处 They gave every user a big surprise on Christmas Holiday. 个人简介我是歌谣,欢迎和 ...
antd vue form表单子组件调用父组件的方法没反应_前几天推了Vue，今天给React疯狂打call...
在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数.但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难任何库都要在「概念简洁」(自由度高)和「使用便 ...
React+Antd+TypeScript 开发规范
React+Antd+TypeScript 规范整合 1.TypeScript代码标准化规则提取出部分适用于项目中的官方要求的的TypeScript用于约束贡献者的编码规范 [typescript官 ...
antd vue form 手动校验_Ant Design 4.0 的一些杂事儿 - Form 篇
上一篇:Ant Design 4.0 的一些杂事儿 - Table 篇是的,趁着手热,于是又开了一篇新的文章,用来讲讲我们在开发 Ant Design 4.0 的 Form 时遇到的一些杂事儿.当然 ...

react+antd:在Form中使用Dropdown

react+antd:在Form中使用Dropdown相关推荐

最新文章

热门文章