React Redux onDeleteClick isNot Function

Question

我正在使用 react-bootstrap-table 在 React 中实现 table。我的问题是 onDeleteClick 方法。在下面的示例中，此函数可以正常工作。

const StorehouseListTest = ({ storehouses, onDeleteClick }) => (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {storehouses.map(storehouse => {
        return (
          <tr key={storehouse.id}>
            <td>
              <Link to={"/skladiste/" + storehouse.slug}>{storehouse.storehouse_name}</Link>
            </td>
            <td>
            <button
                className="btn btn-outline-danger"
                onClick={() => onDeleteClick(storehouse)}
              >
                Delete
              </button>
            </td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

但是，在下面的代码中，当我想在函数 actionsLink 按钮中包含 onDeleteClick 时，我使用了 react-bootstrap-table-next 并且我收到错误消息“onDeleteClick 不是函数" 当按下按钮时。

import React from "react";
import PropTypes from "prop-types";

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';

const { SearchBar } = Search;

function actionsLink(cell, row) {
  return (
    <div>
            <div className="btn-group">
              <a
                href={"/skladiste/" + row.slug}
                className="btn btn-md btn-outline-success icon-btn borderless"
              >
                <i className="ion ion-md-search"></i>
              </a>          
              <button
                className="btn btn-outline-danger"
                onClick={() => this.onDeleteClick(row.slug)}
              >
                Delete
              </button>
            </div>
          </div>

  );
}

const columns =  [
    {
        dataField: "id",
        text: "ID"
    },
    {
        dataField: "storehouse_name",
        text: "Storehouse name"
    },
    {
        dataField: "available",
        text: "Available"
    },
    {
        dataField: "id",
        text: "Actions"
        formatter: actionsLink
    }
]

const StorehouseList = ({ storehouses, onDeleteClick }) => (
    <>
        <ToolkitProvider
        keyField="id"
        data={ storehouses } 
        columns={ columns } 
        search
        >
        {props => (
            <div>
                <SearchBar { ...props.searchProps } />
                <hr />
                <BootstrapTable
                    {...props.baseProps}
                    keyField="id"
                    bootstrap4
                    striped
                    hover
                    pagination={paginationFactory()}
                />
            </div>
            )
        }
        </ToolkitProvider>
    </>
);

StorehouseList.propTypes = {
  storehouses: PropTypes.array.isRequired,
  onDeleteClick: PropTypes.func.isRequired
};

export default StorehouseList;

有人对如何解决这个问题有什么建议吗？

Answer 1

在 actionsLink 中你不能使用 this.onDeleteClick 因为它只传递给 StorehouseList.

看起来 react-bootstrap-table2-toolkit 可以选择将额外数据传递给格式化程序，因此您可以使用它将 onDeleteClick 传递给您的 actionsLink，方法是将其作为额外数据包括在内您的列格式器：

请注意，您需要在 StorehouseList 中定义列，以便使用传递给它的 onDeleteClick：

const StorehouseList = ({ storehouses, onDeleteClick }) => {
    const columns =  [
        ...
        {
            dataField: "id",
            text: "Actions"
            formatter: actionsLink,
            formatExtraData: { onDeleteClick },
        }
    ];

    return (
        <ToolkitProvider
            ...
    )
]

然后在actionsLink中使用第四个参数得到formatExtraData.onDeleteClick:

function actionsLink(cell, row, rowIndex, formatExtraData) {
    ...
        <button
            ...
            onClick={() => formatExtraData.onDeleteClick(row.slug)}
            ...
}

React Redux onDeleteClick isNot Function

React Redux onDeleteClick isNot Function

reactjs

react-bootstrap

react-redux

react-bootstrap-table