React查找陣列中所有未選中的元素-有解無憂

所以基本上我有一個物件陣列，其中包含名稱、id 和一個 isSelected 值，起初它是假的。當我將此陣列映射到我的組件上并顯示它們時，我可以檢測到使用我在 onClick={} 中呼叫的 SelectHandler 函式選擇的元素的索引。

我想要做的是使 isSelected 為被選中的元素為真，而為其余所有元素為假。因為我一次只能選擇陣列的一個元素。然后在選定元素樣式之后會發生變化。

我想知道如何實作這一點，以及我應該使用 onClick 方法還是應該使用另一種方法？

在此處輸入影像描述

uj5u.com熱心網友回復：

您可以使用單個狀態變數來跟蹤當前選擇了哪個元素，例如

const [selectedId, setSelectedId] = useState();

然后，在 onClick

onClick={() => setSelectedId(id)}

在元素的樣式中，根據 selectedId 是否等于元素自己的 id 來應用樣式

uj5u.com熱心網友回復：

查看您的代碼，并同意您可以使用單個狀態變數來設定活動 id，我會說您可以避免將此isSelected布爾物件屬性一起用于此特定實體，如下所示：

const UserProfileCard = (): JSX.Element => {
  const [selectedId, setSelectedId] = useState<number | undefined>();

  const MockSearchOptions = [
    { id: 1, option: 'Room Name' },
    { id: 2, option: 'Org Name' },
    { id: 3, option: 'Etc.....' },
  ];

  return (
    <div className="user-profile-card__search_options">
      {MockSearchOptions.map((item, index) => {
        const activeClassTag = selectedId === item.id ? '-selected' : '';
        const { id, option } = item;

        return (
          <div
            key={`${id}-${index}`}
            onClick={() => setSelectedId(id)}
            className={`user-profile-card__search-option${activeClassTag}`}
          >
            <p>{option}</p>
          </div>
        );
      })}
    </div>
  );
};

uj5u.com熱心網友回復：

首先不要發送物件的索引，如果您對陣列進行排序或更改，索引可能會更改。只需發送點擊物件的 id。

onClick={() => selectHandler(item.id)}

const selectHandler = (id) => {
    const tempArr = [...searchOptions]
    tempArr.forEach(item => {
         if(item.id === id) {
               item.isSelected = !item.isSelected;
         } else {
               item.isSelected = false;
         }
    })
    //if you use useState:
    setSearchOptions([...tempArr])
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/456015.html

標籤：数组反应字典选择索引

上一篇：更新字典串列中的專案

下一篇：如何在python中將陣列轉換為字典？