欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

今天就跟大家聊聊有關“怎樣使用useState實現(xiàn)修改表格數(shù)據(jù)的需求”的內(nèi)容，可能很多人都不太了解，為了讓大家認識和更進一步的了解，小編給大家總結了以下內(nèi)容，希望這篇“怎樣使用useState實現(xiàn)修改表格數(shù)據(jù)的需求”文章能對大家有幫助。

如何實現(xiàn)在當前表格直接更改數(shù)據(jù)

需求

用戶點擊修改按鈕時直接在彈出框的當前頁面內(nèi)直接再次修改點擊行相關信息：

效果如下

點擊修改當事人信息時，直接將當前改為輸入框，并將信息展示，同時操作欄內(nèi)的內(nèi)容變?yōu)楸４婧腿∠?

具體做法

我這里是使用的antd組件內(nèi)的可編輯表格;當然原生的也可以做，以前也做過;

這里的關鍵是點擊修改按鈕時，令當前行的表格變?yōu)檩斎肟?，并展示?shù)據(jù);

給數(shù)據(jù)每一項加上 editable： true屬性，并通過該屬性控制 渲染的是數(shù)據(jù)還是可修改的輸入框

這里是使用的useState()方法來進行狀態(tài)控制的;

• 關于 useState 的用法是，需要傳入一個參數(shù)作為狀態(tài)的初始值，當函數(shù)執(zhí)行后會返回兩個值，一個是當前狀態(tài)的屬性，一個是修改狀態(tài)的方法。
• 使用方法更新數(shù)據(jù)后會觸發(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一個初始值為空，點擊修改后使用setEditingKey()方法(useState返回的方法)將useState數(shù)據(jù)的值賦值為當前行的唯一key值，這樣二者相等，就可以區(qū)別點擊的是哪一條數(shù)據(jù)的按鈕了;點擊取消setEditingKey(’’)重新置空;

判斷邏輯：

// 是否正在修改
    const isEditing = (record: Item) => record.key === editingKey;

渲染數(shù)據(jù)前進行判斷：

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: `請?zhí)顚?{title}!`,
                        },
                    ]}
                >
                    <Input />
                </Form.Item>
            ) : (
                    children
                )}
        </td>
    );
};

導出：

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ù)源，

功能實現(xiàn)。

useState修改對象的字段

首先定義一個空對象

const [dataSelect, setDataSelect] = React.useState({})

給這個對象附上不同值，但不會把原來的覆蓋的掉

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
    }
  }

原理用一個第三方的值，作為中間變量。每次都是附上最新的data。

現(xiàn)在大家對于怎樣使用useState實現(xiàn)修改表格數(shù)據(jù)的需求的內(nèi)容應該都有一定的認識了吧，希望這篇能對大家有所幫助。最后，想要了解更多，歡迎關注群英網(wǎng)絡，群英網(wǎng)絡將為大家推送更多相關的文章。

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：[email protected]進行舉報，并提供相關證據(jù)，查實之后，將立刻刪除涉嫌侵權內(nèi)容。

猜你喜歡

• jQuery中怎樣刪除css樣式，代碼是什么

  刪除方法：1、用removeClass()或toggleClass()移除指定CSS類，語法“removeClass("類名")”或“toggleClass("類名")”；2、用removeAttr()去除id、class或style屬性。

• JavaScript實現(xiàn)百度搜索原理及代碼介紹

  搜索功能可以幫助我們更快的獲取到我們想要的信息，那么我們做網(wǎng)站時如何實現(xiàn)一個搜索功能呢？這篇文章就以JavaScript實現(xiàn)百度搜索為例，介紹一下實現(xiàn)原理以及具體代碼。

• 如何掌握React Hook的用法，常用的有哪些

  這篇文章主要介紹了React Hook用法詳解（6個常見hook）,本文通過實例代碼給大家介紹了6個常見hook，需要的朋友可以參考下

• vue框架怎樣實現(xiàn)選擇題的答題功能？

  這篇文章主要給大家分享怎樣用vue框架來實現(xiàn)選擇題的答題功能，也就是選對選項跳下一題，選錯則提示重新答題，下文有具體的代碼，感興趣的朋友可以參考，下面我們一起來了解一下吧。

• 怎樣做一個小程序自定義彈框，方法是什么

  這篇文章主要為大家詳細介紹了小程序自定義彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下