React關(guān)于antd table中select的設(shè)值更新問題

更新時(shí)間：2024年03月22日 09:56:07 作者：jwensh

這篇文章主要介紹了React關(guān)于antd table中select的設(shè)值更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

問題 1. 默認(rèn)值問題（沒有顯示placeholer）

描述：

正常情況下，表格一列下不同行，可能有不同值，這些值設(shè)值到 select 希望展示不同的樣式;

如空值（0；’’）,應(yīng)該顯示 placeholder

<Select
  showSearch
  suffixIcon={<SearchOutlined />}
  style={{ width: 150 }}
  placeholder="請(qǐng)選擇設(shè)置項(xiàng)"
>
...
</Select>

上面的寫法會(huì)顯示 placeholder 內(nèi)容，但是沒有進(jìn)行設(shè)值操作

// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={text as string}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請(qǐng)選擇設(shè)置項(xiàng)"
    >
    ...
    </Select>
)

上面 text 是 antd table column 傳過來的值，且值是空值
結(jié)果：還是不能展示 placeholder
這里直接說結(jié)論吧，不吃丸子了

select 的 value、defaultValue、key

defaultValue 和 value 區(qū)別？

defautValue 指定默認(rèn)值，也就是我們頁面加載時(shí)，通過 dataSource 設(shè)置進(jìn)來的數(shù)據(jù)；

value 指定當(dāng)前選中值，通過下拉列表 option 選中后的值；

問題：使用defaultValue會(huì)有一個(gè)問題,對(duì)頁面進(jìn)行數(shù)據(jù)處理后數(shù)據(jù)沒有及時(shí)更新，需要用 value 解決此問題

解決：空值展示 placeholder ，需要設(shè)置為 undefined

// react + typescript
render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={record.setting === '' ? undefined : record.setting}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請(qǐng)選擇設(shè)置項(xiàng)"
    >
    ...
    </Select>
)

官網(wǎng)看到：

export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;

也實(shí)驗(yàn)過 null ts eslint 直接提示不行，所以，想要了解其深度原理，可看源碼

問題2. 更新一行數(shù)據(jù)后，select 的 selectValue 狀態(tài)沒有變化

更新 select 的值有兩個(gè)渠道

1.通過下拉框選擇 option
2.其他事件更新了當(dāng)前行數(shù)據(jù)（如: setting=‘user’ => setting=’’）

第二個(gè)方案應(yīng)該是我們經(jīng)常用的，如下寫法是不生效的

render : (text: React.ReactNode, record: TaskListType) => (
    <Select
      showSearch
      value={record.setting === '' ? undefined : record.setting}
      suffixIcon={<SearchOutlined />}
      style={{ width: 150 }}
      placeholder="請(qǐng)選擇設(shè)置項(xiàng)"
    >
    ...
    </Select>
)


// 更新操作是 Hooks 函數(shù)直接 setTaskList([...dataSource])

不管使用 value 還是 defaultValue 都不生效；

解決：為 select 添加一個(gè) key 的 props

實(shí)現(xiàn)非受控組件（用defaultValue），兩個(gè)辦法

第一個(gè)服務(wù)端沒有返回?cái)?shù)據(jù)的時(shí)候，不 render Select，render 一個(gè)占位的 placeholder;
給 Select 加一個(gè) 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="請(qǐng)選擇設(shè)置項(xiàng)"
    >
    ...
    </Select>
)

問題3. antd table 局部一行數(shù)據(jù)更新

// 某一行數(shù)據(jù)更新調(diào)用的方法
const handleSave = (row: TaskListType) => {
    // 從新將數(shù)據(jù) copy 一波
    const newData = [...dataSource];
    // 找到操作更新的數(shù)據(jù)在源數(shù)據(jù)中的下標(biāo)
    const index = newData.findIndex(item => row.key === item.key);
    // 找到對(duì)應(yīng)更新的數(shù)據(jù)
    const item = newData[index];
    // 將新數(shù)據(jù)中的數(shù)據(jù)進(jìn)行更新
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    // useState 更新即可
    setTaskList(newData);
  };