前言:
此刻姐妹们对“react select联动”大体比较讲究,各位老铁们都需要了解一些“react select联动”的相关内容。那么小编在网摘上收集了一些有关“react select联动””的相关文章,希望咱们能喜欢,看官们快快来学习一下吧!首发:antd问题记录 · 语雀
为保证最佳的阅读体验,建议前往语雀体验[比心]
3.x到5.x版本差异getFieldDecorator改用Form.Item
在3.x版本的时候,组件之间可以简单的进行联动,例如Select组件选择其他值之后,与之关联显示的内容会随之变化,但4.20.0版本之后,还需要加一个Form.useWatch监听字段变化
form校验多个规则显示问题
可能会有3种办法,一是rules全部自己写validtor校验,这个方案感觉有点蹩脚但也能用用,不是最佳选择;二是官方推荐的option;三是也是最简单的加一个validateFirst。
form校验的callback
3.x版本可以使用callback和Promise,到了5.x版本之后,会有error提示:Warning: callback is deprecated. Please return a promise instead.也就是callback已废弃,请使用promise代替。
form的label属性ts类型
前:string|ReactNode
后:ReactNode
Select、DatePicker等组件出现脱离页面的情况一、场景
在开发过程中,会使用很多的Select、DatePicker等组件,当这些组件在可滚动的区域内滚动时,你会发现该组件的选项框也会跟着滚动,产生分离
二、解决方法
官方给我们提供了getPopupContainer属性,该属性是菜单渲染的父节点,默认是body。只要添加该属性,设置好父节点,就可以解决这种分离。
添加getPopupContainer属性
// getPopupContainer={(triggerNode: any) => triggerNode.parentNode}// triggerNode:当前元素的节点// triggerNode.parentNode:最近的父级元素节点// 在Select、DatePicker、Cascader添加getPopupContainer属性栗子:<div id='getPopupContainerDiv'> <Select defaultValue="1" getPopupContainer={(triggerNode: any) => triggerNode.parentNode} > <Option value="1">选项1</Option> <Option value="2">选项2</Option> </Select> <DatePicker getPopupContainer={(triggerNode: any) => triggerNode.parentNode} format="YYYY-MM-DD" /> <Cascader getPopupContainer={(triggerNode: any) => triggerNode.parentNode} options={options} /></div>
设置完成之后,发现antd4.x中Select是没有分离的,但是DatePicker和Cascader还是会分离。但在3.x是正常的。打印三个组件的triggerNode以及triggerNode.parentNode如下。
Select的triggerNode以及triggerNode.parentNode
DatePicker和Cascader的triggerNode以及triggerNode.parentNode
三个组件的triggerNode.parentNode有差异,DatePicker和Cascader直接找到了最外层的div,他的节点还是在最外层,导致分离。
解决方法:直接定位到本身节点,将getPopupContainer代码修改一番,如下:
getPopupContainer={(triggerNode: any) => triggerNode}三、全局设置getPopupContainer
// 一般来说,项目中会用到很多这种选择组件,那么需要全局配置。<ConfigProvider locale={zh_CN} getPopupContainer={(node: any) => node}> <Route /></ConfigProvider >四、全局配置后,在Modal中使用报错解决
全局配置由于版本原因,如果一个项目挂载到不同的站点导致报错,例如p站antd3.0版本和w站antd4.0版本ant3.x版本报错,4.x版本直接空白
官方API解释:全局设置getPopupContainer 触发节点,Modal 用法不存在 triggerNode导致报错
解决方法:增加一个判断条件
<ConfigProvider locale={znCN} getPopupContainer={(node: any) => { const popupContainer = document.getElementById('popupContainer') || node; if (node) { // 目前只全局处理select和picker分离问题,如其他组件分离此处添加配置 if ( node.className.indexOf('ant-select-selector') > -1 || node.className.indexOf('ant-picker') > -1 || node.className.indexOf('anticon-history') > -1 ) { return popupContainer; } } return document.body; }} > <Layout className={styles.pageContainer} id="popupContainer"> {props.children} </Layout></ConfigProvider>附录
目前官方正在出解决方法,具体可看:「链接」、「链接」
标签: #react select联动