使用antd中的select下拉框,遇到个小问题,后台管理系统中,使用下拉框,一般不会是简单的就直接使用select中的value值,而是会使用id或者value中文对应的keyword,并且这个在option中的value值也是可能重复的
我这里用的是react
let list = [
{
title: '普通会员',
id: 1
},{
title: '测试专用人员',
id: 2
}, {
title: '测试专用人员',
id: 3
}
];
let currentEditOption: {
roleId: '',
title: '',
};
<Select
value={currentEditOption.title}
style={{width: '70%'}}
suffixIcon={<Icon type="caret-down"/>}
>
{
list.map((item:any) =>
<Option key={item.id} value={item.title}>{item.title}</Option>
)
}
</Select>
下拉框事件
handleSelect = (value:any, option: any) => {
console.log(value)
/* option返回的是option对应的整个对象 */
console.log(option)
};
此时,并没有出现问题,但是,一旦list中有两项的title字段是以一样的,浏览器就报警告
Warning: Encountered two children with the same key, `.$测试专用人员`. Keys should be unique so that components maintain their identity across updates. Non-unique keysmay cause children to be duplicated and/or omitted — the behavior is unsupported andcould change in a future version.
按照我的理解,select下拉框应该是去检测key值而不检测value值的,但是,我设置key值后,还是会检测value值
当然,你这里可以去掉value值的设置,它也能实现下拉选择后,onchang能获取到对应的数据,但我想实现的是,当select中有选中值的时候,option选项中对应的值应该是选中状态的
然后,我就尝试了多次,还设置过optionLabelProp这个属性,没有用,开始的时候,我也设置过labelInValue,不过,我传入value值不是对象,导致我开始尝试的时候放弃了labelInValue属性的设置,后面又重新尝试,发现OK了,并且,这个时候,不用设置option中的value值,只设置key就可以了
<Select
labelInValue
value={{key: currentItem.roleId, label:currentItem.title}}
style={{width: '70%'}}
onChange={handleSelect}
suffixIcon={<Icon type="caret-down" />}
getPopupContainer={(triggerNode: any) => triggerNode.parentNode}
>
{
list.map((item:any) =>
<Option key={item.id}>{item.title}</Option>
)
}
</Select>
下拉框的选择事件
/* 定义下拉框选择 */
handleSelect = (value:any, option: any) => {
/* 此时value值是一个对象 */
console.log(value)
/* option返回的是option对应的整个对象 */
console.log(option)
};
在弹窗组件中使用select时,当点击Select组件出现下拉选项后滚动原始页面,出现下拉选项和Select框分离现象
这个时候就可以用官方提供的方式来防止位置偏移
在select中直接加入这个方法getPopupContainer={triggerNode => triggerNode.parentNode}
最近使用antd来做react项目的UI。从antd官网上,在使用create-react-app脚手架搭建项目时步骤如下:加模块 react-app-rewired, babel-plugin-import, react-app-rewire-less,根目录添加config-overrides.js,修改npm script即可, 一切正常
在React项目开发中,经常需要引用一些实用的第三方框架。在使用一些比较庞大的第三方框架时,框架内的各种资源文件数量巨大,首先介绍下对单个框架做按需加载的方法
最近在使用List组件的时候,发现组件没有重新渲染,导致状态发送错误。这里我们使用了List组件,这是一个很常用的组件。但是当我们点击按钮的时候,发现6,7,8三个组件 都没有重新渲染。
Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的
在开发中台过程中 我们的原型中有很多表单,antd有表单组件,但是粒度比较细,就单纯组件而言,无可厚非,但是在开发过程中,可能会造成代码不够聚合,有些表单公共逻辑无法提取,copy paste比较多,所以可以加以封装
modal框的dom与<div id=root>同级别,因此不能以user-manage为父元素定义样式,以.modal定义样式会污染其他模块的模态框,(下拉框选项的级别也与root同级),即:
我们从官网摘下来一段Form代码,可以很清晰的看出一个简单的表单,主要是为了统一收集和校验组件的值。那么它是如何做到统一收集和校验呢?原理很简单,只需要通过监听表单组件的onChange事件,获取表单项的 value
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!