React关于antd table中select的设值更新问题
更新时间：2024年03月22日 09:56:07 作者：jwensh
这篇文章主要介绍了React关于antd table中select的设值更新问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
问题 1. 默认值问题（没有显示placeholer）
描述：
正常情况下，表格一列下不同行，可能有不同值，这些值设值到 select 希望展示不同的样式;
如空值（0；’’）,应该显示 placeholder
<Select
showSearch
suffixIcon={<SearchOutlined />}
style={{ width: 150 }}
placeholder="请选择设置项"
>
...
</Select>
上面的写法会显示 placeholder 内容，但是没有进行设值操作
// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
<Select
showSearch
value={text as string}
suffixIcon={<SearchOutlined />}
style={{ width: 150 }}
placeholder="请选择设置项"
>
...
</Select>
)
- 上面
text是 antd table column 传过来的值，且值是空值 - 结果：还是不能展示
placeholder - 这里直接说结论吧，不吃丸子了
select 的 value、defaultValue、key
defaultValue 和 value 区别 ？
defautValue 指定默认值，也就是我们页面加载时，通过 dataSource 设置进来的数据；
value 指定当前选中值，通过下拉列表 option 选中后的值；
问题：使用defaultValue会有一个问题,对页面进行数据处理后数据没有及时更新，需要用 value 解决此问题
解决：空值展示 placeholder ，需要设置为 undefined
// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
<Select
showSearch
value={record.setting === '' ? undefined : record.setting}
suffixIcon={<SearchOutlined />}
style={{ width: 150 }}
placeholder="请选择设置项"
>
...
</Select>
)
官网看到：
export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
也实验过 null ts eslint 直接提示不行，所以，想要了解其深度原理，可看源码
问题2. 更新一行数据后，select 的 selectValue 状态没有变化
更新 select 的值有两个渠道
- 1.通过下拉框选择 option
- 2.其他事件更新了当前行数据（如: setting=‘user’ => setting=’’）
第二个方案应该是我们经常用的，如下写法是不生效的
render : (text: React.ReactNode, record: TaskListType) => (
<Select
showSearch
value={record.setting === '' ? undefined : record.setting}
suffixIcon={<SearchOutlined />}
style={{ width: 150 }}
placeholder="请选择设置项"
>
...
</Select>
)
// 更新操作是 Hooks 函数直接 setTaskList([...dataSource])
不管使用 value 还是 defaultValue 都不生效；
解决：为 select 添加一个 key 的 props
实现非受控组件（用defaultValue），两个办法
- 第一个服务端没有返回数据的时候，不 render Select，render 一个占位的 placeholder;
- 给 Select 加一个 key，值为 defaultValue;
render : (text: React.ReactNode, record: TaskListType) => (
<Select
showSearch
value={record.setting === '' ? undefined : record.setting}
key={record.setting}
suffixIcon={<SearchOutlined />}
style={{ width: 150 }}
placeholder="请选择设置项"
>
...
</Select>
)
问题3. antd table 局部一行数据更新
// 某一行数据更新调用的方法
const handleSave = (row: TaskListType) => {
// 从新将数据 copy 一波
const newData = [...dataSource];
// 找到操作更新的数据在源数据中的下标
const index = newData.findIndex(item => row.key === item.key);
// 找到对应更新的数据
const item = newData[index];
// 将新数据中的数据进行更新
newData.splice(index, 1, {
...item,
...row,
});
// useState 更新即可
setTaskList(newData);
};
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
使用react-virtualized实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧2021-05-05
本篇文章主要介绍了ReactNative短信验证码倒计时控件的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
本文主要介绍了React-Route6实现keep-alive效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>2022-06-06
这篇文章主要介绍了react hooks计数器实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
本篇文章主要介绍了浅谈使用React.setState需要注意的三点，提出了三点对 React 新手来说是很容易忽略的地方，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
当我们需要将一个字符串按照指定的分隔符进行分割成数组时,我们可以在组件的生命周期方法中使用split方法来实现这个功能,本文就来介绍一下,感兴趣的可以了解下2023-10-10
这篇文章主要介绍了React Form组件的实现封装杂谈，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
ES6 class类链式继承，实例化及react super(props)原理详解
这篇文章主要介绍了ES6 class类链式继承，实例化及react super(props)原理,结合实例形式详细分析了ES6 中class类链式继承，实例化及react super(props)原理相关概念、原理、定义与使用技巧,需要的朋友可以参考下2020-02-02
这篇文章主要为大家介绍了React实现antdM的级联菜单实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
解决React报错The tag is unrecognized in this browser
这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论