React 查找数组中所有未选中的元素

Question

所以基本上我有一个对象数组，其中包含名称、id 和一个最初为 false 的 isSelected 值。当我将此数组映射到我的组件并显示它们时，我可以检测到使用我在 onClick={}.

中调用的 SelectHandler 函数选择的元素的索引

我想做的是让被选中的元素的 isSelected 为真，其余元素为假。因为我一次只能选择数组中的一个元素。然后选择元素样式后会发生变化。

我想知道如何实现这一点，以及我是应该使用 onClick 方法还是应该使用其他方法？

enter image description here

Answer 1

您可以使用单个状态变量跟踪当前选择的元素，例如

const [selectedId, setSelectedId] = useState();

然后，在onClick

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

并且在元素的样式中，根据 selectedId 是否等于元素自己的 id 来应用样式

Answer 2

查看您的代码，并同意您可以使用单个状态变量来设置活动 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>
  );
};

Answer 3

首先不要发送对象的索引，如果您对数组进行排序或更改，索引可能会更改。只需发送点击对象的 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])
}

React 查找数组中所有未选中的元素

React find all unselected elements of the array

arrays

reactjs

dictionary

select

indexing