时间戳

首页 > 解决方案 > reactjs如何获取表格单元格的当前值

reactjs - reactjs如何获取表格单元格的当前值

问题描述

我正在使用 Html 表格来显示数据，我的目标是通过单击表格单元格来获取单元格值。并根据表格单元格返回的值设置状态。我正在使用 jquery 从它正在工作的表中获取值，但我无法更新状态。我正在使用句柄单击功能来更新用户单击表格单元格时的状态，但我不知道如何获取表格单元格值。

下面是用于显示数据的代码。

import React, { Component } from "react";
import $ from "jquery";
import "./../css/index.css";
import { BrowserRouter as Router, Switch, Route, Link,Redirect } from "react-router-dom";

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      accounts : [],
      account:'',
      region:'',
   }
   this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount = async () => {
    let _this = this;
    let account = "";
    let region = "";
    $("table").on("click", "td", function(e) {
      region = e.delegateTarget.tHead.rows[0].cells[this.cellIndex];
      account = this.parentNode.cells[0];
      account = $(account).text()
      region = $(region).text()
      console.log(region);
      console.log(account);
    });
    const response = await fetch(
      "",
      {
        headers: {
          "x-api-key": ""
        }
      }
    );

    const data = await response.json();
    this.setState({ accounts:data});
    $(".main-table").clone(true).appendTo('#table-scroll').addClass('clone');

  };
  handleClick(){
    let account = 'zahid';
    let region = 'hussain'
    this.setState(prevState => {
      prevState.account = '';
      prevState.region = '';
      return {
        count: prevState.count * 2,
        account: prevState.account + account,
        region: prevState.region + region
      }
    })
  }
  renderTableData() {
    return this.state.accounts.map((account, index) => {
      const {
        environment,
        account_number,
        bu,
        account_alias,
        resource_name
      } = account; //destructuring
      const regions = account.regions;
      return (
        <tr key={index}>
          <td className="fixed-side">{account_number}</td>
          <td className="fixed-side">{account_alias}</td>
          <td className="fixed-side">{environment}</td>
          <td className="fixed-side">{bu}</td>
          <td>
            <Link to={{
              pathname:"/securityGroups",
              state: { account:'057346956084',region:'us-east-1'}}}>
              {regions["us-east-1"]}
            </Link>
            </td>
          <td>{regions["us-east-2"]}</td>
          <td>{regions["us-west-1"]}</td>
          <td>{regions["us-west-2"]}</td>
          <td>{regions["us-gov-west-1"]}</td>
          <td>{regions["us-gov-east-1"]}</td>
          <td>{regions["sa-east-1"]}</td>
          <td>{regions["me-south-1"]}</td>
          <td onClick={this.handleClick}>{regions["eu-north-1"]}</td>
          <td>{regions["eu-west-3"]}</td>
          <td>{regions["eu-west-2"]}</td>
          <td>{regions["eu-west-1"]}</td>
          <td>{regions["eu-central-1"]}</td>
          <td>{regions["cn-northwest-1"]}</td>
          <td>{regions["cn-north-1"]}</td>
          <td>{regions["ca-central-1"]}</td>
          <td>{regions["ap-northeast-1"]}</td>
          <td>{regions["ap-southeast-2"]}</td>
          <td>{regions["ap-southeast-1"]}</td>
          <td>{regions["ap-northeast-2"]}</td>
          <td>{regions["ap-northeast-3"]}</td>
          <td>{regions["ap-south-1"]}</td>
          <td>{regions["ap-east-1"]}</td>
        </tr>
      );
    });
  }
  render() {
    console.log(this.state.count);
    console.log(this.state.account);
    return (
      <div className="wrapper">
        <div id="table-scroll" className="table-scroll">
          <div className="table-fixed-right table-wrap">
            <table className="main-table">
              <thead>
                <tr>
                  <th className="fixed-side" scope="col">Account Number</th>
                  <th className="fixed-side" scope="col">Account Alias</th>
                  <th className="fixed-side" scope="col">Environment</th>
                  <th  className="fixed-side" scope="col">BU</th>
                  <th scope="col">us-gov-west-1</th>
                  <th scope="col">us-gov-east-1</th>
                  <th scope="col">sa-east-1</th>
                  <th scope="col">me-south-1</th>
                  <th scope="col">eu-north-1 </th>
                  <th scope="col">eu-west-3</th>
                  <th scope="col">eu-west-2</th>
                  <th scope="col">eu-west-1</th>
                  <th scope="col"> eu-central-1</th>
                  <th scope="col">cn-northwest-1</th>
                  <th scope="col"> cn-north-1</th>
                  <th scope="col">ca-central-1</th>
                  <th scope="col">ap-northeast-1</th>
                  <th scope="col"> ap-southeast-2</th>
                  <th scope="col">ap-southeast-1</th>
                  <th scope="col">ap-northeast-2</th>
                  <th scope="col">ap-northeast-3</th>
                  <th scope="col">ap-south-1</th>
                  <th scope="col">ap-east-1</th>
                  <th scope="col">us-west-2</th>
                  <th scope="col">us-west-1</th>
                </tr>
              </thead>
          <tbody>
            {this.renderTableData()}
            {/* <button onClick={this.handleClick}>{this.state.account}</button> */}
          </tbody>
        </table>
      </div>
    </div>
    </div>
    );
  }
}
export default Table;

下图是我的输出 [![在此处输入图像描述][1]][1]

谁能告诉我如何做到这一点。

请看下图我必须得到红色框的值[！[在此处输入图像描述][2]][2]已指定

标签： reactjs

解决方案

如果你使用 react，你真的不需要 jQuery。React 使操作 dom 变得非常容易和快速。将 jQuery 与 react 一起使用是一种反模式。

话虽如此，在您的示例中，您将希望使用onClick并且如果您知道单元格的内容（在本例中是您在 UI 中显示的内容），您可以将该值传递给处理程序。

onClick在细胞上使用：

 // here we pass handleCellClick the value of `regions["us-east-2"])`
<td onClick={() => handleCellClick(regions["us-east-2"])}>
    {regions["us-east-2"]}
</td>

在您的组件中定义单击处理程序，如下所示。 content将是你通过的任何东西。

handleCellClick(content) {
  //... do stuff

}

要从表格标题中获取文本：

<th scope="col" onClick={this.handleHeaderClick}>                    
    us-gov-west-1
</th>

并定义handleHeaderClick为：

handleHeaderClick(event) {
    const value = event.target.textContent;
    console.log(value);
}

如果您只需要传递单击的表格上任何内容的文本内容，无论是单元格还是表格标题，您都可以使用相同的模式。如果是这种情况，您可以对每个元素使用以相同方式绑定的单个函数。如果您需要传递其他参数以及获取textContent它，它将如下所示：

<td
   onClick={event => this.handleClickWithAdditionalArgs(event, "Whatever other value I want to pass")}>
        {regions["me-south-1"]}
</td>

函数定义为：

handleClickWithAdditionalArgs(event, otherArg) {
    const value = event.target.textContent;
    console.log(value); // the text in the element clicked
    console.log(otherArg); // whatever else you pass 
  }

同样，您提到需要在点击时发送“帐户”。根据您提供的代码，我不知道那是什么。如果你澄清你的意思，我可以告诉你。您要求在单击时获取单元格的内容，我现在已经展示了如何以多种方式执行此操作。1）通过将您想要的任何值显式传递给您的函数，以及 2）通过解析 dom 以获取textContent.

推荐阅读