如何在反应js中的表格中添加分页和触发行点击事件

Question

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

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 侦听器。