添加删除按钮

Question

我创建了一个搜索应用程序，用户可以在其中搜索电影，它将显示在 table 中。但是，我想要在每个电影行的最后一列中使用删除按钮来从 table 中删除一部电影。我无法做到这一点。有人可以帮助我如何在最后一列中添加删除按钮吗？我已经创建了 deleteMovie 操作和缩减程序。我只是不确定如何将它添加到 table。我尝试按照他们在 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

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

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

您将创建的 hook/component 必须在数据数组上调用！

Answer 2

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

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

添加删除按钮

adding a delete button

javascript

reactjs

react-bootstrap

react-bootstrap-table