Author: jwensh
Date: 2021.08.27
描述:
正常情况下,表格一列下不同行,可能有不同值,这些值设值到 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
问题:
使用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 直接提示不行,所以,想要了解其深度原理,可看源码更新 select 的值有两个渠道
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
都不生效;
key
的 props实现非受控组件(用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>
)
// 某一行数据更新调用的方法
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);
};