我有消息列表。我为此创建了自定义组件。我在选择项目时更改了背景颜色。但是,没有找到重置另一个项目选择背景的方法。
假设我选择第一个项目,它会更改为 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 除了选中之外的所有其他值。 任何帮助将不胜感激。
最佳答案
您需要将“选定”状态提升一级。因此,当您选择一条消息时,每条消息都知道哪一条是选定的:
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>
);
关于javascript - 将除选定之外的所有其他状态更改为未选定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64317536/