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

【问题标题】：How to get the row data from a table using React?如何使用 React 从表中获取行数据？
【发布时间】：2020-09-03 07:00:50
【问题描述】：

我有一个显示一些数据的表格。其中一列包含一些操作图标，用于通过 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;

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

【问题讨论】：

在 onClick() 方法中将路由作为参数发送
@TusharKale：我不需要通过索引？

标签： javascript reactjs bootstrap-table

【解决方案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];
}

【讨论】：

【解决方案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;

【讨论】：