如何在React中正确地更改2个状态？
提问于 2021-01-12 16:15:33
我有两个跨度和它们的状态：
const Sorter = () => {
const [sorterTabs, setSorterTabs] = useState([
{id:'The cheapest', isActive: false },
{id:'The fastest', isActive: false }
])
const handleSorterClick = ({ target }) => {
const newSorterTabs = [...sorterTabs]
newSorterTabs.forEach((item) => {
if (item.id === target.getAttribute('name')) {
item.isActive = !item.isActive
}
})
setSorterTabs(newSorterTabs)
}
return (
<>
{sorterTabs.map((item) =>
<SorterSpan
key={item.id}
onClick={handleSorterClick}
name={item.id}
className={item.isActive ? 'active' : ''}
/>
)}
</>
)
}
const SorterSpan = ({name, onClick, className}) => {
return (
<span
onClick={onClick}
className={className}
name={name}
>
{name}
</span>
)
}我了解如何更改每个跨度的isActive属性。我需要的是，如果我单击一个跨度，它的属性isActive变为true，另一个跨度的isActive需要变为false，第二个跨度也是如此。如何在handleSorterClick函数中正确操作？
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-01-12 16:23:57
我认为对于你正在尝试做的事情，更好、更干净、更快的方法是：
const Sorter = () => {
const sorterTabs = [{ id: "The cheapest" }, { id: "The fastest" }];
const [selected, setSelected] = useState("");
const handleSorterClick = ({ target }) => {
setSelected(target.name);
};
return (
<>
{sorterTabs.map((item) => (
<SorterSpan
key={item.id}
onClick={handleSorterClick}
name={item.id}
className={selected === item.id ? "active" : ""}
/>
))}
</>
);
};
const SorterSpan = ({ name, onClick, className }) => {
return (
<span onClick={onClick} className={className} name={name}>
{name}
</span>
);
};这样，如果您想要扩展跨度，并且想要使用n span而不是2，则只需将它们添加到sorterTabs变量中
Stack Overflow用户
发布于 2021-01-12 16:24:01
我认为为每个跨度创建一个状态，映射跨度，并以这种方式控制事物会更容易。这样，如果你的应用增长了，你只需要为每个跨度创建一个新的状态。或者甚至使用useContext钩子或redux，但这在这里不适用。这将是我的逻辑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65687742
复制相关文章
腾讯云开发者
