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引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧
2021-06-06
React Native 截屏组件的示例代码
本篇文章主要介绍了React Native 截屏组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
React报错之组件不能作为JSX组件使用的解决方法
本文主要介绍了React报错之组件不能作为JSX组件使用的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
教你使用vscode 搭建react-native开发环境
本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧
2021-07-07
React Hook useState useEffect componentD
这篇文章主要介绍了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
React源码分析之useCallback与useMemo及useContext详解
这篇文章主要介绍了React useCallback与useMemo及useContext源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-11-11
一文带你搞懂react hooks的类型声明
这篇文章主要给带大家搞清楚react hooks的类型声明，如果有同学还不清楚react hooks的类型声明，来看本文就对了，文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-07-07
React嵌套组件的构建顺序
这篇文章主要介绍了React嵌套组件的构建顺序，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下
2021-04-04
react PropTypes校验传递的值操作示例
这篇文章主要介绍了react PropTypes校验传递的值操作,结合实例形式分析了react PropTypes针对传递的值进行校验操作相关实现技巧,需要的朋友可以参考下
2020-04-04
React函数组件与类组件使用及优劣对比
本文主要介绍了React函数组件与类组件使用及优劣对比，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04