React Redux onDeleteClick不是函数

debugcn 发表于 Dev

布迪米尔

我正在使用react-bootstrap-table在React中实现表。我的问题是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>
);

但是，在下面的代码中，当我想将onDeleteClick包含在actionsLink按钮中时，我会使用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;

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

里克

在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)}
            ...
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。