如何使用 react-select-table 的行作為 react-select 輸入字段的選項

Question

我有一個輸入字段，它應該接受來自已設置選項的多個輸入。 - 這個輸入字段需要像標簽輸入字段一樣出現，所以我使用了 React-select 庫：

設置選項將來自 react-bootstrap-table，所以我禁用了 react-select 輸入字段中的內置下拉列表。

問題是我無法通過從 react-bootstrap-table 中取消選擇行來刪除所選項目。 我想我在輸入字段和表格之間傳遞值的方式上做錯了，但無法弄清楚。

這是 代碼框

Answer 1

問題是您嘗試比較兩個對象，但是沒有通用方法可以確定 object 等於另一個. 您可以JSON.stringify它們並進行比較，但那不是可靠的方法。

相反，您可以通過 object 鍵過濾數組，比方說label 。 在這種情況下，您的 function 應如下所示：

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

這是要預覽的codeandbox

@編輯

如果你想在 Clear 上做點什么

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