如何在 React js 的 table 中添加分页和触发行点击事件

Question

我在反应中有以下子组件，我在父组件中的按钮单击事件上呈现。到这里我没有问题。 Table 正在页面上呈现。我在 table 上编写了行单击事件 findDetails()。但问题是 rowClick 事件无法处理行点击。而不是在组件在页面上呈现时执行它。我想在 rowClick 上执行。下面是我的 table 组件代码。此外，我还需要在相同的 table 中实现分页，我不确定该怎么做。


class Table extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getHeaader = () => {
       var tableHeadings = [
      "Customer ID",
      "Customer Name",
      "Address",
      "Contact",
    ];
    return tableHeadings.map((key) => {
      return <th key={key}> {key.toUpperCase()}</th>;
    });
  };

  getRowsData = (e) => {
    return this.props.Data.map((value, index) => {
      const {
         "Customer_ID",
         "Customer_Name",
         "Address",
         "Contact",
      } = value;
      return (
        <tr
          key={CUSTOMER_ID}
          onClick={this.findDetails(value)}
        >
          <td> {CUSTOMER_ID} </td>
          <td> {CUSTOMER_NAME} </td>
          <td> {Address} </td>
          <td> {Contact} </td>
          <td>
            <button className="btn btn-info">Find Details</button>
          </td>
        </tr>
      );
    });
  };


  findDetails = (value) => {
    console.log("in show button", value.count);
    if (value["count"] === 0) {
      alert("No details for given customer");
    }
  };

  render() {
    return (
      <div>
        <table
          id="display-table"
          className="table table-bordered table table-hover table table-responsive pagination"
          style={{ tableLayout: "fixed" }}
        >
          <tbody>
            <tr>{this.getHeaader()}</tr>
            {this.getRowsData()}
          </tbody>
        </table>
      </div>
    );
  }
}

export default Table;
`

Answer 1

您以错误的方式调用了您的 onClick。传递参数时，您必须将您的函数包装在匿名函数中：

  <tr
          key={CUSTOMER_ID}
          onClick={() => this.findDetails(value)}
  >

我会解释的。当传递 onClick 时，React 正在等待一个函数名（实际上是一个引用），然后通过添加括号调用它。如果您像 (onClick={this.findDetails()} ) 那样自己添加它们，您会立即调用函数并将函数的 RESULT 传递给 onClick 侦听器。

如何在 React js 的 table 中添加分页和触发行点击事件

how to add pagination and fire row click event in table in react js

reactjs

react-table