如何使用 React 从表中获取行数据？

Question

我有一个显示一些数据的表格。 其中一列包含一些操作图标，用于通过 onClick 从特定行获取高级信息。 我需要从行中获取数据并将其呈现在另一个组件中。 我该如何实施？

下面是代码：

const MainContent = () => {
  ....
  ....
  ....

  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        <td>{route.appName}</td>
        <td>{route.parent}</td>
        <td>{route.createdTs}</td>
        <td></td>
        <td>{route.respCode}</td>
        <td>{route.respContentType}</td>
        <td>{route.respDelay}</td>
        <td>
          <Icon
            link
            name="eye"
            onClick={() => handleClickView("0", "PARENT")}
          />
          <Icon
            link
            name="edit"
            onClick={() => handleClickView("0", "PARENT")}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };
  // iterating through sub-arrays
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE")}
            />
            <Icon link name="delete" />
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      <tr key={index}>
        <td>{item.appName}</td>
        <td></td>
        <td>{item.createdTs}</td>
        <td>{item.pattern}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    );
  };

  return (
    <div>
     .... 
     ....
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th> {/* row that contains the icons*/}
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   ....
                   ....
                   ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;

有人可以为我提供任何参考或解决方法来实现这一点吗？

Answer 1

您可以将route和contents的索引传递给 onclick 函数，对吗？ 就像是：

const contents = (item, contentsIndex, routeIndex) => {
...
  <Icon
   link
   name="eye"
   onClick={() => handleClickView("0", "USECASE", contentsIndex, routeIndex)}
  />
}

然后可以使用它来获取正确的数据：

const handleClickView = (a, b, contentsIndex, routeIndex) => {
  const data = data[routeIndex][contentsIndex];
}

Answer 2

正如 Tushar Kale 所建议的，我已经通过了图标的 onClick 中的route和item 。 以下是对我有用的代码，

const MainContent = () => {
  ....
  ....
  ....

  const routeContents = (route, index) => {
    return (
      <tr key={index}>
        <td>{route.appName}</td>
        <td>{route.parent}</td>
        <td>{route.createdTs}</td>
        <td></td>
        <td>{route.respCode}</td>
        <td>{route.respContentType}</td>
        <td>{route.respDelay}</td>
        <td>
          <Icon
            link
            name="eye"
            onClick={() => handleClickView("0", "PARENT", route)}
          />
          <Icon
            link
            name="edit"
            onClick={() => handleClickView("0", "PARENT", route)}
          />
          <Icon link name="delete" />
        </td>
      </tr>
    );
  };
  // iterating through sub-arrays
  const contents = (item, index) => {
    return item.routeChildEntry ? (
      <>
        <tr key={index}>
          <td>{item.appName}</td>
          <td></td>
          <td>{item.createdTs}</td>
          <td>{item.pattern}</td>
          <td></td>
          <td></td>
          <td></td>
          <td>
            <Icon
              link
              name="eye"
              onClick={() => handleClickView("0", "USECASE", item)}
            />
            <Icon
              link
              name="edit"
              onClick={() => handleClickView("0", "USECASE", item)}
            />
            <Icon link name="delete" />
          </td>
        </tr>
        {item.routeChildEntry.map(routeContents)}
      </>
    ) : (
      <tr key={index}>
        <td>{item.appName}</td>
        <td></td>
        <td>{item.createdTs}</td>
        <td>{item.pattern}</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    );
  };

  return (
    <div>
     .... 
     ....
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th> {/* row that contains the icons*/}
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                   ....
                   ....
                   ....
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MainContent;