按钮对ReactJS动态生成html触发onClick事件

Question

我有一个反应组分，其中我动态地呈现表行。我想触发它​​的ID按钮的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>