使用钩子reactjs动态添加/删除旧行

使用钩子（Hooks）是React.js中的一种特性，它允许我们在函数组件中使用状态和其他React特性。通过使用钩子，我们可以实现动态添加/删除旧行的功能。

在React.js中，我们可以使用useState钩子来管理组件的状态。useState钩子接受一个初始状态作为参数，并返回一个包含当前状态值和更新状态值的数组。我们可以使用解构赋值来获取这两个值。

首先，我们需要在组件中引入useState钩子：

import React, { useState } from 'react';

然后，我们可以在组件中定义一个状态变量和一个更新状态的函数：

const [rows, setRows] = useState([]);

上述代码中，我们定义了一个名为rows的状态变量，并使用setRows函数来更新它。

接下来，我们可以编写添加旧行的函数：

const addRow = () => {
  setRows(prevRows => [...prevRows, 'new row']);
};

上述代码中，我们使用setRows函数来更新rows状态变量。通过传递一个函数作为参数，我们可以获取到先前的状态值（prevRows），然后使用扩展运算符（...）将新行添加到先前的行数组中。

最后，我们可以编写删除旧行的函数：

const deleteRow = (index) => {
  setRows(prevRows => prevRows.filter((_, i) => i !== index));
};

上述代码中，我们使用setRows函数来更新rows状态变量。通过传递一个函数作为参数，我们可以获取到先前的状态值（prevRows），然后使用filter方法来过滤掉要删除的行。

在组件的JSX中，我们可以使用map方法来渲染所有的行：

return (
  <div>
    {rows.map((row, index) => (
      <div key={index}>{row}</div>
    ))}
    <button onClick={addRow}>添加行</button>
    <button onClick={() => deleteRow(index)}>删除行</button>
  </div>
);

上述代码中，我们使用map方法遍历rows数组，并为每一行创建一个div元素。我们还为添加行按钮和删除行按钮添加了点击事件。

这样，我们就实现了使用钩子React.js动态添加/删除旧行的功能。

推荐的腾讯云相关产品：腾讯云函数（Serverless Cloud Function）是一种事件驱动的无服务器计算服务，可以帮助开发者更轻松地构建和管理应用程序。您可以使用腾讯云函数来处理前端请求，包括动态添加/删除旧行的功能。了解更多信息，请访问腾讯云函数官方文档：腾讯云函数。