在 reactjs 的 table 中插入重复行

Question

我是新手。我有一个要求，如果用户单击 + 符号，则应在正下方插入相同的 row。我无法思考逻辑。

为了生成table我写了下面的代码。我不知道我应该写什么来创建 duplicate.

{response.map((certificate: Certificate) => {
  return (
    <tr key={certificate.certificateNo}>
      <td>{certificate.certificateNo}</td>
      <td>{certificate.sponser}</td>
      <td>{certificate.protoColNo}</td>
      <td>{certificate.startDate}</td>
      <td>{certificate.endDate}</td>
      <td>{certificate.noOfSubjects}</td>
      <td>{certificate.country}</td>
      <td>{certificate.requestStatus}</td>
      <td>
        <div className="btn-group mr-2">
          <Link
            to={`/certificates/${certificate.certificateNo}/edit`}
            className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-pencil"></i>
          </Link>
          <Link
            to={`/certificates/${certificate.certificateNo}/edit`}
            className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-plus-square"></i>
          </Link>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            -
          </a>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-x-circle"></i>
          </a>
          <a href="#" className="btn btn-sm btn-outline-secondary">
            <i className="bi bi-search"></i>
          </a>
        </div>
      </td>
    </tr>
  );
})}

正如 Samet 所建议的，下面的代码正在运行。但我手动传递索引。就像我已经通过 0 一样。如何使其动态化？

const copy = (index: number) => {
    const duplicatRow = response[index];
    const firstPart = response.slice(0, index + 1);
    const secondPart = response.slice(index + 1, response.length);
    const newData = [...firstPart, duplicatRow, ...secondPart];
    setResponse(newData);
};



{response.map((certificate: Certificate) => {
                                    return (
                                     <tr key={certificate.certificateNo}>
                                      <td>{certificate.certificateNo}</td>
                                      <td>{certificate.sponser}</td>
                                      <td>{certificate.protoColNo}</td>
                                      <td>{certificate.startDate}</td>
                                      <td>{certificate.endDate}</td>
                                      <td>{certificate.noOfSubjects}</td>
                                      <td>{certificate.country}</td>
                                      <td>{certificate.requestStatus}</td>
                                      <td>
                                            <button className="btn btn-sm btn-outline-secondary" onClick={() =>copy(0)} >
                                                <i className="bi bi-plus-square"></i>
                                            </button>

Answer 1

您可以分两步完成：

1.捕获按钮被点击的行

这很简单。在按钮的 onClick 方法上，您可以接收行的唯一标识符，可能是行数据的 id 字段，或者接收数据中行的索引。我会选择第二个并将索引传递给我的 duplicateRow 方法。

2。复制行

这就是奇迹发生的地方。您将收到索引，找到该索引处的行数据，然后将您的数组分成两部分：

从 0 到 index + 1
从 index + 1 到 data.length

您的重复值将位于两者之间。现在您可以使用新数据更新状态。

这是您可以为您的组件修改的示例代码：

function duplicateRow(index: number) {
  const duplicateRow = data[index];
  const firstPart = data.slice(0, index + 1);
  const secondPart = data.slice(index + 1, data.length);

  const newData = [...firstPart, duplicateData, ...secondPart];

  setData(newData);
}

在 reactjs 的 table 中插入重复行

Insert duplicate row in table in reactjs

javascript

user-interface

html-table

reactjs

react-hooks