最近使用antd pro写项目,其中有一个下拉框回显问题,原本挺简单的代码,但是就是回显对不上。
我给的值是id,想让其显示name,但是显示的确实id。。
正常的解决思路如下:
原代码代码如下:
<ProFormSelect
name="parentId"
label="所属分类"
initialValue={formType === FormType.add ? '' : currentRow?.parentId}
valueEnum={classList}
rules={[{ required: true, message: '分类组名为必填项' }]}
/>
修改后代码如下:
<ProFormSelect
name="parentId"
label="所属分类"
initialValue={formType === FormType.add ? '' : currentRow?.parentId + ""}
valueEnum={classList}
rules={[{ required: true, message: '分类组名为必填项' }]}
/>
原因:实际上 select 组件会自动将对应的 id 转为值展示。
就是id的值类型没有对上,parendId是number类型,但是在组件里的值是string类型的,所以在parentdId后面拼个空字符串,就好了!
-------------------------下面来个不正常的解决思路----------------------------------
我回显直接给name,这个时候你回显倒是能对上,切换下拉框选择再次点击确认,也没问题。
但是如果在编辑回显页面,不操作,直接点击确认,就会有问题。
传的值parentId就会变为name,
由于我知道id肯定是一串数字,而name基本上不会是一串纯数字。所以做了如下的判断,(当然是个不好的办法,但是也是一种临时解决问题的思路)
if (isNaN(Number(value.parentId, 10))) {
}else{
}
判断下值是不是纯数字,然后分为两种情况,分别处理也行。
一个问题的解决方法千万种,不行咱就换。