时间戳

首页 > 解决方案 > 添加删除按钮

javascript - 添加删除按钮

问题描述

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

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);

标签： javascriptreactjsreact-bootstrapreact-bootstrap-table

解决方案

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

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

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

推荐阅读