javascript - 将状态更改为未选中，除选中外的所有其他

Question

我有消息列表。我为此创建了自定义组件。我在选择项目时更改了背景颜色。但是，没有找到在另一个项目选择上重置背景的方法。
假设我选择第一个项目它更改为 isSelected = true 但是，在第二个选择它更改为 isSelected = true 但是，我想要第一个(或所有其他)isSelected = false。

const Container = styled.div`
  width: auto;
  cursor: pointer;
  :hover {
    background-color: #ccc;
    border-radius: 5px;
  }

  ${({ isSelected }) =>
    isSelected &&
    `
    background-color: #b4b4b4`}

`;

const SomeText = styled.span`
  color: #000000

    ${({ isSelected }) =>
        isSelected &&
        `
        color: #ffffff;`}
`;

const Message = ({ item, onItemClick }) => {
  const [isSelected, setIsSelected] = useState(false);

  const onClick = data => {
    onItemClick(data);
    setIsSelected(true);
  };

 return (
  <Container isSelected={isSelected} onClick={onClick}>
   <SomeText isSelected={isSelected}>{item.text}            </SomeText>
  </Container>
 )
};

Parent component:

return (
    <div>
        {list.map(item => {
          return <Message item={item} key={item.id} onItemClick={onItemClick}/>;
        })}
    </div>
  );

有没有什么好的方法可以让 isSelected = false 除selected 之外的所有其他选项。
任何帮助将不胜感激。

Answer 1

您需要将“选定”状态提升一级。因此，当您选择一条消息时，每条消息都知道选择的是哪一条:

const Container = styled.div`
  width: auto;
  cursor: pointer;
  :hover {
    background-color: #ccc;
    border-radius: 5px;
  }

  ${({ selected }) =>
    selected &&
    `
    background-color: #b4b4b4`}

`;

const SomeText = styled.span`
  color: #000000

    ${({ selected }) =>
        selected &&
        `
        color: #ffffff;`}
`;

const Message = ({ item, onItemClick, selected, setSelected }) => {
  const onClick = data => {
    onItemClick(data);
    setSelected();
  };

 return (
  <Container selected={selected} onClick={onClick}>
   <SomeText selected={selected}>{item.text}            </SomeText>
  </Container>
 )
};

Parent component:
  const [selected, setSelected] = useState(null);
  return (
    <div>
        {list.map(item => {
          return <Message
            item={item}
            key={item.id}
            onItemClick={onItemClick}
            selected={selected === item.id}
            setSelected={() => setSelected(item.id)
          />;
        })}
    </div>
  );