react中useState使用:如何實現在當前表格直接更改資料

2022-08-04 22:04:47

如何實現在當前表格直接更改資料

需求

使用者點選修改按鈕時直接在彈出框的當前頁面內直接再次修改點選行相關資訊：

效果如下

點選修改當事人資訊時，直接將當前改為輸入框，並將資訊展示，同時操作欄內的內容變為儲存和取消;

具體做法

我這裡是使用的antd元件內的可編輯表格;當然原生的也可以做，以前也做過;

這裡的關鍵是點選修改按鈕時，令當前行的表格變為輸入框，並展示資料;

給資料每一項加上 editable： true屬性，並通過該屬性控制渲染的是資料還是可修改的輸入框

這裡是使用的useState()方法來進行狀態控制的;

關於 useState 的用法是，需要傳入一個引數作為狀態的初始值，當函數執行後會返回兩個值，一個是當前狀態的屬性，一個是修改狀態的方法。
使用方法更新資料後會觸發render()重新渲染資料

 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資料的值賦值為當前行的唯一key值，這樣二者相等，就可以區別點選的是哪一條資料的按鈕了;點選取消setEditingKey(’’)重新置空;

判斷邏輯：

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

渲染資料前進行判斷：

 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),
            }),
        };
    });

根據資料狀態判斷渲染的是表格合適輸入框：

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: `請填寫${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為資料來源，

功能實現。

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。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

react中useState使用:如何實現在當前表格直接更改資料

目錄

如何實現在當前表格直接更改資料

需求

效果如下

具體做法

useState修改物件的欄位

熱門文章