如何在React 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侦听器。