antd select 赋值的注意事项,值赋不上的解决方案(必须类型相同才可以)

问题描述:

 当我们 使用 antd Select组件时,有的时候 赋值会赋 不上。如果api和属性 使用无误的话。就有可能是 赋值的类型 不全等。

请看这个案例:

antd select 赋值 的注意事项(必须类型相同才可以) 在线 运行演示icon-default.png?t=LA92https://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)

猜你喜欢

转载自blog.csdn.net/weixin_44058725/article/details/121977734