Question

我创建了一个搜索应用程序，用户可以在其中搜索电影，它将显示在表格中。但是，我希望每个电影行的最后一列中的删除按钮可以从表中删除电影。我无法做到这一点。有人可以帮助我如何在最后一栏中添加该删除按钮吗？我已经创建了deleteMovie动作和reducers。我只是不确定如何将其添加到表中。我尝试按照他们在docs中所说的去做，但是对我来说不起作用

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteMovie } from "../action/movieActions";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";
const MovieTable = ({ data, deleteMovie }) => {
  console.log(data);
  const columns = [
    {
      dataField: "movieId",
      text: "ID",
      sort: true
    },
    {
      dataField: "name",
      text: "Name",
      sort: true
    },
    {
      dataField: "year",
      text: "Year",
      sort: true
    },
    {
      dataField: "Delete",
      title: "delete",
      text: "Delete",
       events: {
        onClick: () => deleteMovie(data.movieId)//tried this but didn't work
     }
    }
  ]
  return (
    <div className="col m4">
      <BootstrapTable keyField="id" data={data} columns={columns} />
    </div>
  );
};

MovieTable.propTypes = {
  deleteMovie: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteMovie }
)(MovieTable);

Answer 1

这样，您可以在列上添加点击事件。

首先，您必须创建一个挂钩或返回按钮（删除按钮）的组件，然后将产品ID作为参数传递给该挂钩或组件。

您将创建的钩子/组件必须在数据数组上调用！

Answer 2

选择器data.movieId无效，数据变量是包含数组的对象。像这样选择movieId：

{
    dataField: "movieId",
    formatter: (rowContent, row) => {
        return (
          <button onClick={() => deleteMovie(data[0].movieId)}>delete</button>
        );
    }
}

添加删除按钮

2 个答案: