react中useState使用:如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
如何實(shí)現(xiàn)在當(dāng)前表格直接更改數(shù)據(jù)
需求
用戶(hù)點(diǎn)擊修改按鈕時(shí)直接在彈出框的當(dāng)前頁(yè)面內(nèi)直接再次修改點(diǎn)擊行相關(guān)信息：
效果如下
點(diǎn)擊修改當(dāng)事人信息時(shí)，直接將當(dāng)前改為輸入框，并將信息展示，同時(shí)操作欄內(nèi)的內(nèi)容變?yōu)楸４婧腿∠?
具體做法
我這里是使用的antd組件內(nèi)的可編輯表格;當(dāng)然原生的也可以做，以前也做過(guò);
這里的關(guān)鍵是點(diǎn)擊修改按鈕時(shí)，令當(dāng)前行的表格變?yōu)檩斎肟?，并展示?shù)據(jù);
給數(shù)據(jù)每一項(xiàng)加上 editable： true屬性，并通過(guò)該屬性控制 渲染的是數(shù)據(jù)還是可修改的輸入框
這里是使用的useState()方法來(lái)進(jìn)行狀態(tài)控制的;
- 關(guān)于 useState 的用法是，需要傳入一個(gè)參數(shù)作為狀態(tài)的初始值，當(dāng)函數(shù)執(zhí)行后會(huì)返回兩個(gè)值，一個(gè)是當(dāng)前狀態(tài)的屬性，一個(gè)是修改狀態(tài)的方法。
- 使用方法更新數(shù)據(jù)后會(huì)觸發(fā)render()重新渲染數(shù)據(jù)
const [editingKey, setEditingKey] = useState('');
// 是否正在修改
const isEditing = (record: Item) => record.key === editingKey;
// 修改按鈕
const edit = (record: Item) => {
form.setFieldsValue({ ...record });
setEditingKey(record.key);
};
// 取消
const cancel = () => {
setEditingKey('');
};
// 保存
const save = async (id: React.Key) => {
try {
const row = (await form.validateFields())
console.log('row', row)
row.id = id
onSave(row)
setEditingKey('');
} catch (err) {
console.log(err)
}
};
我這里給useState一個(gè)初始值為空，點(diǎn)擊修改后使用setEditingKey()方法(useState返回的方法)將useState數(shù)據(jù)的值賦值為當(dāng)前行的唯一key值，這樣二者相等，就可以區(qū)別點(diǎn)擊的是哪一條數(shù)據(jù)的按鈕了;點(diǎn)擊取消setEditingKey(’’)重新置空;
判斷邏輯：
// 是否正在修改
const isEditing = (record: Item) => record.key === editingKey;
渲染數(shù)據(jù)前進(jìn)行判斷：
const mergedColumns = columns.map(col => {
if (!col.editable) {
return col;
}
return {
...col,
onCell: (record: Item) => ({
record,
dataIndex: col.dataIndex,
title: col.title,
editing: isEditing(record),
}),
};
});
根據(jù)數(shù)據(jù)狀態(tài)判斷渲染的是表格合適輸入框：
const EditableCell: React.FC<EditableCellProps> = ({
editing,
dataIndex,
title,
record,
index,
children,
...restProps
}) => {
return (
<td {...restProps}>
{editing ? (
<Form.Item
name={dataIndex}
style={{ margin: 0 }}
rules={[
{
required: true,
message: `請(qǐng)?zhí)顚?xiě)${title}!`,
},
]}
>
<Input />
</Form.Item>
) : (
children
)}
</td>
);
};
導(dǎo)出：
return (
<Form form={form} component={false}>
<Table
components={{
body: {
cell: EditableCell,
},
}}
bordered
pagination={false}
dataSource={dataSource}
{...otherProps}
columns={mergedColumns}
rowClassName="editable-row"
/>
</Form>
);
其中dataSource為數(shù)據(jù)源，
功能實(shí)現(xiàn)。
useState修改對(duì)象的字段
首先定義一個(gè)空對(duì)象
const [dataSelect, setDataSelect] = React.useState({})
給這個(gè)對(duì)象附上不同值，但不會(huì)把原來(lái)的覆蓋的掉
const select = (e, item, type) => {
const data = { ...dataSelect }
if (type == 'price') {
setSelectNO(e)
data.min_price = item.min_price
data.max_price = item.max_price
setDataSelect(data)
console.log(data)
return
}
if (type == 'optionsCity') {
setCity(e)
data.city = item.text
setDataSelect(data)
console.log(data)
return
}
}
原理用一個(gè)第三方的值，作為中間變量。每次都是附上最新的data。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
React如何使用create-react-app創(chuàng)建react項(xiàng)目
這篇文章主要介紹了React如何使用create-react-app創(chuàng)建react項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Rect Intersection判斷兩個(gè)矩形是否相交
這篇文章主要為大家介紹了Rect Intersection判斷兩個(gè)矩形是否相交的算法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
全棧輕量級(jí)搭配之Remix Prisma Sqlite使用分析
這篇文章主要為大家介紹了全棧輕量級(jí)搭配之Remix Prisma Sqlite使用示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
React為什么需要Scheduler調(diào)度器原理詳解
這篇文章主要為大家介紹了React為什么需要Scheduler調(diào)度器原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在react-router4中進(jìn)行代碼拆分的方法（基于webpack）
這篇文章主要介紹了在react-router4中進(jìn)行代碼拆分的方法（基于webpack），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
React實(shí)現(xiàn)倒計(jì)時(shí)功能組件
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)React實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)功能組件,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下2023-09-09
React項(xiàng)目仿小紅書(shū)首頁(yè)保姆級(jí)實(shí)戰(zhàn)教程
React 是一個(gè)用于構(gòu)建用戶(hù)界面的 Javascript庫(kù)，接下來(lái)將通過(guò)實(shí)戰(zhàn)小紅書(shū)首頁(yè)的詳細(xì)介紹其設(shè)計(jì)思路和方法，將讀者帶入到react的開(kāi)源世界,需要的朋友可以參考下2022-07-07
這篇文章主要為大家介紹了React useCallback鉤子的作用方法demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React組件實(shí)例三大屬性state props refs使用詳解
這篇文章主要為大家介紹了React組件實(shí)例三大屬性state props refs使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
useCallback是react中比較重要的一個(gè)hook，useCallback 用來(lái)返回一個(gè)函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11