Инициировать событие onClick кнопки на динамически сгенерированном HTML в ReactJS.

Question

У меня есть компонент реагирования, в котором я динамически отображаю строки таблицы.Я хочу вызвать событие onClick кнопки с ее идентификатором.

Вот мой код:

import React, { Component } from "react";
import axios from "axios";
import $ from "jquery";
import { isDivisibleBy100 } from "../utils/utility";
import { Chart } from "react-charts";

class Strategy extends Component {
  state = {
    Price: [],
    loadPrice: true,
    loadData: true,
    data: [],
    errorMsg: ""
  };

  componentDidMount() {
    this.getPriceList();
    let { data } = this.state;
    data.push(data.length);
    this.setState({ data });
  }

  getPriceList = () => {
    axios.get("http://localhost:8000/listprice/").then(res => {
      if (res.data.result === 1) {
        this.setState({
          niftyStrikePrice: res.data.data,
          loadStrikePrice: false
        });
      }
    });
  };

  ...

  appendChild = () => {
    let { data } = this.state;
    if (data.length < 4) {
      data.push(data.length);
      this.setState({ data });
    } else {
      this.setState({ errorMsg: "You cannot add more than 4 rows." });
      setTimeout(() => {
        this.setState({ errorMsg: "" });
      }, 3000);
    }
  };

  render() {
    return (
      <div className="container container_padding">
        <div className="row">
          <div className="col-md-9 col-sm-9 col-xs-12 white-box">
            ...
            <div className="col-sm-12" style={{ marginBottom: "50px" }}>
              <table className="table table-bordered">
                <thead>
                  <tr>
                    <td>#</td>
                    <td>Type</td>
                    <td>Position</td>
                    <td>Price</td>
                    <td>No.</td>
                    <td></td>
                  </tr>
                </thead>
                <tbody>
                  {this.state.loadPrice
                    ? ""
                    : this.state.data.map((id, i) => (
                        <Row
                          key={i}
                          id={id}
                          strikeprice={this.state.Price}
                        />
                      ))}
                </tbody>
              </table>

            </div>
            <div className="col-sm-12">
              ...
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const Row = ({ id, price }) => (
  <tr>
    <td>{id + 1}</td>
    <td>
      <select
        className="form-control"
        name={`select-type-${id}`}
        id={`select-type-${id}`}
      >
        <option value="select">Select</option>
        <option value="a">A</option>
        <option value="b">B</option>
      </select>
    </td>
    <td>
      <select
        className="form-control"
        name={`select-position-${id}`}
        id={`select-position-${id}`}
      >
        <option value="select">Select</option>
        <option value="long">Long</option>
        <option value="short">Short</option>
      </select>
    </td>
    <td>
      <select
        className="form-control"
        name={`price-list-${id}`}
        id={`price-list-${id}`}
      >
        <option value="select">Select</option>
        {price.map(p => (
          <option value={p.price} key={p.price}>
            {p.price}
          </option>
        ))}
      </select>
    </td>
    <td style={{ width: "180px" }}>
      <input
        id={`input-lot-size-${id}`}
        type="text"
        className="form-control"
        defaultValue="1"
      />
    </td>
    <td>
      <button onClick={'onclick event here'} rel={id} className="btn btn-circle-remove" id={`btn-remove-${id}`}><i className="fa fa-minus"></i></button>
    </td>
  </tr>
);

export default Strategy;

В const Row мне нужна кнопка, которая при нажатии на текущую строку будетудалить.Но здесь мы не можем вызвать такую ​​функцию, как: this.removerow здесь, в const Row.Как можно здесь динамически вызвать функцию и удалить эту текущую строку в ReactJS.

Как мне добиться этого здесь?

Заранее спасибо.

Answer 1

Вы должны создать его в родительском компоненте и передать обработчик как опору.

Таким образом, ваш Strategy должен иметь что-то вроде

removeRow = (event) => {
    const id = Number(event.currentTarget.getAttribute('rel'));
    // here you must remove it from the data in the state
    const data = this.state.data.filter(value=>value !== id);
    this.setState({data});
}

, и когда вы создаете строкисделайте

this.state.data.map((id, i) => (
                    <Row
                      key={id}
                      id={id}
                      strikeprice={this.state.Price}
                      onRemove={this.removeRow}
                    />
                  ))

и, наконец, в вашем Row компоненте

const Row = ({ id, price, onRemove }) => (

и

<button onClick={onRemove} rel={id} className="btn btn-circle-remove" id={`btn-remove-${id}`}><i className="fa fa-minus"></i></button>