如何在 React HTML 中从可编辑列创建动态表

介绍

表格对于在 Web 应用中显示数据至关重要。它们通常由不同页面或模态框上的表单补充。但是，有时，当您只需要编辑一列时，创建表单会很麻烦。因此需要创建可编辑的表格以减少为表格构建表单的麻烦。这种方法的一个优点是，您还可以通过最小化用户必须与之交互的界面来改善应用的用户体验 (UX)。您还可以加载数据动态填充表格行，确保您的表格始终具有更新的数据。

在本指南中，您将学习如何构建一个简单的库存表，其中的“单价”列可编辑，以便更新产品价格。该表将从 Mock API 获取数据，您可以使用本指南创建 Mock API：在 React 中创建 Mock API。

本指南假设您熟悉 HTML（表格元素）、React Hooks、创建 Mock API 以及使用 fetch 进行 API 调用。

创建 Mock API

按照我之前的指南在 React 中创建 Mock API 中所述设置 Mock API 。

完成后，用以下代码替换 db.json 的内容：

      {
  "inventory": [
    {
      "id": 1,
      "product_name": "Weetabix",
      "product_category": "Cereal",
      "unit_price": "501",
    },
    {
      "id": 2,
      "product_name": "Colgate Toothpaste",
      "product_category": "Toiletries",
      "unit_price": "119",
    },
    {
      "id": 3,
      "product_name": "Imperial Leather Soap",
      "product_category": "Toiletries",
      "unit_price": "235",
    },
    {
      "id": 4,
      "product_name": "Sunlight Detergent",
      "product_category": "Toiletries",
      "unit_price": "401",
    }
  ]
}
    

要启动您的 API，请运行以下命令：

      json-server --watch src/db.json

您应该能够看到您的 API 通过端点http:/localhost:3000/inventory运行。

设置 React 应用程序

使用 Create-React-App，这是一个可让您创建无需构建配置的 React 应用程序的脚手架。

确保你的机器上安装了create-react-app。如果没有，你可以通过运行以下命令来安装它：

      npm install -g create-react-app

安装完成后，要创建应用程序，请运行以下命令：

      npx create-react-app simple-inventory-table

要启动你的应用程序，请运行以下命令：

      yarn start

创建表

打开 App.js 文件并将默认内容替换为以下内容：

      import React from 'react';

function App() {
    return (
        <div className="container">
            <h1>Simple Inventory Table</h1>
            <table>
                <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Product Category</th>
                    <th>Unit Price</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    <tr>
                        <td/>
                        <td/>
                        <td/>
                        <td/>
                    </tr>
                </tbody>
            </table>
        </div>
    );
}

export default App;
    

上面，您已定义一个类名为 container 的 div 来容纳表格。您已定义页面的标题。

填充表格

要填充数据，请向您创建的 Mock API URL 发出 GET 请求。定义 Mock API 的 API_HOST 和端点。这是在App函数之外完成的：

      import React from 'react';

const API_HOST = "http://localhost:3000";
const INVENTORY_API_URL = `${API_HOST}/inventory`;

function App() {
    ...
}
    

使用 React Hooks 定义应用中的状态和生命周期。首先定义一个状态变量来存储来自 Mock API 的数据。默认值设置为空数组。

      import React, {useState} from 'react';

const API_HOST = "http://localhost:3000";
const INVENTORY_API_URL = `${API_HOST}/inventory`;

function App() {
    // data state variable defaulted to an empty array
    const [data, setData] = useState([]);
    ...
}
    

使用 fetch 定义一个函数来向您的 Mock API 发出 GET 请求。setData函数用于在从 Mock API 获得成功响应后更新数据状态变量。

      import React, {useState} from 'react';

const API_HOST = "http://localhost:3000";
const INVENTORY_API_URL = `${API_HOST}/inventory`;

function App() {
    const [data, setData] = useState([]);
    // GET request function to your Mock API
    const fetchInventory = () => {
        fetch(`${INVENTORY_API_URL}`)
            .then(res => res.json())
            .then(json => setData(json));
    }
    ...
}
    

在组件安装时调用该函数以获取库存数据来填充表格。要动态创建行，请遍历数据并使用.map()函数。

      import React, {useEffect, useState} from 'react';

const API_HOST = "http://localhost:3000";
const INVENTORY_API_URL = `${API_HOST}/inventory`;

function App() {
    const [data, setData] = useState([]);

    // GET request function to your Mock API
    const fetchInventory = () => {
        fetch(`${INVENTORY_API_URL}`)
            .then(res => res.json())
            .then(json => setData(json));
    }
    
    // Calling the function on component mount
    useEffect(() => {
        fetchInventory();
    }, []);


    return (
        <div className="container">
            <h1>Simple Inventory Table</h1>
            <table>
                <thead>
                <tr>
                    <th>Product Name</th>
                    <th>Product Category</th>
                    <th>Unit Price</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    {
                        data.map((item) => (
                            <tr key={item.id}>
                                <td>{item.product_name}</td>
                                <td>{item.product_category}</td>
                                <td>{item.unit_price}</td>
                                <td/>
                            </tr>
                        ))
                    }
                </tbody>
            </table>
        </div>
    );
}

export default App;
    

使表格可编辑

定义一个状态变量inEditMode来跟踪编辑状态。这是一个具有两个属性的对象：

status：一个布尔值，显示表是否处于编辑模式。
rowKey：正在编辑的产品的 ID，指示正在编辑表格上的哪一行。

定义一个状态变量unitPrice来保存正在编辑的行的单价。

定义一个onEdit函数，以一个对象作为参数。该对象有两个属性：

id：正在编辑的行的产品的ID。
currentUnitPrice：产品（正在编辑的行）的当前单价，用于设置初始化编辑模式下可见的输入的 unitPrice 状态变量。

定义一个函数onCancel，重置inEditMode和unitPrice状态变量。

定义一个函数updateInventory，接受一个对象作为参数。该对象有两个属性：

id：正在编辑的行的产品的ID。
newUnitPrice：产品（正在编辑的行）的更新单价。该函数向我们的 Mock API 发送 PATCH 请求，使用新的单价对其进行更新。成功更新后，将重置inEditMode和unitPrice状态变量并获取更新的库存列表。

定义一个onSave函数，接受一个对象作为参数。该对象有两个属性：

id：正在编辑的行的产品的ID。
newUnitPrice：产品（正在编辑的行）的更新单价。该函数调用updateInventory函数来更新单价。

      import React, {useEffect, useState} from 'react';

const API_HOST = "http://localhost:3000";
const INVENTORY_API_URL = `${API_HOST}/inventory`;

function App() {
    ...

    const [inEditMode, setInEditMode] = useState({
        status: false,
        rowKey: null
    });

    const [unitPrice, setUnitPrice] = useState(null);

    /**
     *
     * @param <span

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文