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

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

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

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

描述：

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

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

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

上面的寫法會顯示 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="請選擇設(shè)置項"
    >
    ...
    </Select>
)

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

select 的 value、defaultValue、key

defaultValue 和 value 區(qū)別？

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

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

問題：使用defaultValue會有一個問題,對頁面進(jìn)行數(shù)據(jù)處理后數(shù)據(jù)沒有及時更新，需要用 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="請選擇設(shè)置項"
    >
    ...
    </Select>
)

官網(wǎng)看到：

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

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

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

更新 select 的值有兩個渠道

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

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

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


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

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

解決：為 select 添加一個 key 的 props

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

第一個服務(wù)端沒有返回數(shù)據(jù)的時候，不 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="請選擇設(shè)置項"
    >
    ...
    </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);
    // 找到對應(yīng)更新的數(shù)據(jù)
    const item = newData[index];
    // 將新數(shù)據(jù)中的數(shù)據(jù)進(jìn)行更新
    newData.splice(index, 1, {
      ...item,
      ...row,
    });
    // useState 更新即可
    setTaskList(newData);
  };