как добавить в таблицу событие щелчка строкой и огнем строки в реакции js - PullRequest
Новая
       15

как добавить в таблицу событие щелчка строкой и огнем строки в реакции js

0 голосов
/ 21 апреля 2020

У меня ниже дочерний компонент в реакции, который я рендеринг на событие нажатия кнопки в родительском компоненте. До сих пор у меня нет проблем. Таблица отображается на странице. Я написал событие щелчка строки 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;
`

1 Ответ

1 голос
/ 21 апреля 2020

Вы вызываете свой onClick неправильно. При передаче параметров вы должны обернуть вашу функцию в анонимную: 

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

Я объясню. При передаче onClick React ожидает имя функции (фактически ссылку), которую затем вызывает, добавляя скобки. Если вы добавляете их самостоятельно, как и вы (onClick={this.findDetails()}), вы сразу вызываете функцию и передаете RESULT функции слушателю onClick.

...