问题描述:
当我们 使用 antd Select组件时,有的时候 赋值会赋 不上。如果api和属性 使用无误的话。就有可能是 赋值的类型 不全等。
请看这个案例:
antd select 赋值 的注意事项(必须类型相同才可以) 在线 运行演示https://codepen.io/guyu521/pen/LYzWJoX
/*
这个案例 主要 是三个 sellect 主要体现了 select 设置 值时跟 类型也有 关系 类型 不对 也赋值不了。
一、是直接 赋值 "1"发现 默认值赋值上了
二、是声明了一个defaultVal 变量 赋值 为 number类型的 1 ,发现 默认值 未生效
三、是声明了一个defaultVal2 变量 赋值 为 string类型的 1 ,发现 默认值 生效
结论 select的默认值 和赋值 时 需要 考虑 类型 必须全等才可以 赋值上
事实上 tree,treeSelect 都是如此
*/
const { Select } = antd;
const { Option } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
let defaultVal=1; //类型数字 不能生效
let defaultVal2="1"; //类型 字符串 不能生效
ReactDOM.render(
<div>
<Select defaultValue="1" style={{ width: 120 }} onChange={handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
<Select defaultValue={defaultVal} style={{ width: 120 }} onChange={handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
<Select defaultValue={defaultVal2} style={{ width: 120 }} onChange={handleChange}>
<Option value="1">Jack</Option>
<Option value="2">Lucy</Option>
</Select>
</div>,
mountNode,
);
这个案例 主要 是三个 sellect 主要体现了 select 设置 值时跟 类型也有 关系 类型 不对 也赋值不了。
一、是直接 赋值 "1"发现 默认值赋值上了
二、是声明了一个defaultVal 变量 赋值 为 number类型的 1 ,发现 默认值 未生效
三、是声明了一个defaultVal2 变量 赋值 为 string类型的 1 ,发现 默认值 生效
结论:
select的默认值 和赋值 时 需要 考虑 类型 必须全 等才可以 赋值上
事实上 tree,treeSelect 都是如此
解决方案:
把类型 转换为相同的 即可。
如果 遇到 tree,treeSelect 赋值 或者展开 key 不生效 可以 看看 下面这篇。
react antd 默认展开的踩坑及注意事项(明明写了expendKeys却不起作用,expendKeys注意事项)
antd select 使用几注意事项 及踩坑
antd Select组件 filterOption使用踩坑报(options.props.children.toLower.Case() is not funcrion)