如何使用 react-select-table 的行作为 react-select 的输入字段的选项

Question

我有一个输入字段，它应该接受来自已设置选项的多个输入。 - 这个输入字段需要像标签输入字段一样出现，所以我使用了 React-select 库：

设置选项将来自 react-bootstrap-table 所以我禁用了 react-select 输入字段中的内置下拉列表。

问题是我无法通过从 react-bootstrap-table.[=14= 删除select行来删除 selected 项目] 我想我在如何在输入字段和 table 之间传递值方面做错了，但无法弄清楚。

Answer 1

问题是您尝试比较两个对象，但是没有通用的方法来确定一个对象等于另一个。您可以 JSON.stringify 它们并进行比较，但那不是可靠的方法。

相反，您可以按对象键过滤数组，比方说 label。在这种情况下，您的函数应如下所示：

const setSelected = (row: any, isSelect: any, rowIndex: any, e: any) => {
    if (isSelect) {
        setSelectProducts([...selectedProducts, row]);
    } else {
        const newArray = selectedProducts.filter(
            (item) => item.label !== row.label
        );
        setSelectProducts(newArray);
    }
};

这里是codesandbox预览

@编辑

如果你想在 Clear 上做点什么

onChange={(selectedOption, triggeredAction) => {
  if (triggeredAction.action === 'clear') {
    // Clear happened
  }

如何使用 react-select-table 的行作为 react-select 的输入字段的选项

How to use react-select-table's rows as options to react-select's input field

reactjs

react-select

react-bootstrap-table