我在使用 React hooks 时遇到了一些我不确定该怎么做的事情。
我有一个呈现城市列表的父组件。
const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York"] }) => {
return (
<>
{cities.map(city => {
const [isActive, setActive] = useState(false);
return <p onClick={() => setActive(true)} style={{ color: isActive ? "red" : "green" }}>{city}</p>;
})}
</>
);
};
我遇到的问题是,每次我点击一个城市时,它都会变成红色
,但是我只想让一个城市在任何时候都变成红色(即最近点击的城市)。
如果这个问题有任何不清楚的地方,请告诉我。
在类组件中,我想我可能会做类似于 this 的事情.
参见代码沙盒 here .
最佳答案
如果一次只能选择一个城市,则不需要为所有城市都设置州值。只需将当前选定的一个保留在单个状态属性中:
const Cities = ({ cities = ["London", "Barcelona", "Los Angeles", "New York", "Wigan"] }) => {
const [activeCity, setCity] = useState(null);
return (
<>
{cities.map(city => <p key={city} onClick={() => { setCity(city) }} style={{ color: activeCity === city ? "red" : "green" }}>{city}</p>)}
</>
);
};
关于javascript - 用钩子(Hook) react 切换事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54126640/