在reactjs的表格中插入重復的行-有解無憂

我是新來的反應。我有一個要求，如果用戶單擊符號，row則應在下方插入相同的符號。我無法思考邏輯。

為了生成表，我寫了下面的代碼。我不知道我應該寫什么來創建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>

在reactjs的表格中插入重復的行

uj5u.com熱心網友回復：

您可以分兩步完成此操作：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/365037.html

標籤：javascript 反应用户界面 html-table 反应钩子

上一篇：如何在C中的GTK 單按鈕單擊事件中傳遞多個小部件

下一篇：動態添加時如何設定物件的名稱？