用钩子反应切换活动状态
toggle active state with hooks react
我在使用 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>;
})}
</>
);
};
我遇到的问题是每次我点击一个城市时它会变成 red
,但是我只希望一个城市在任何时候都变成红色(即最近点击的城市)。
如果这个问题有任何不清楚的地方,请告诉我。
在 class 组件中,我想我可能会做类似于 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>)}
</>
);
};
如果只有一个城市可以是红色的,你不应该在循环中使用钩子(实际上你不应该这样做)而是在渲染之上保持一个单一的活动状态,比如:
const App = ({ cities = ["London", "Manchester", "Leeds"] }) => {
const [active, setActive] = useState(false)
const City = ({ name }) => (
<p
onClick={ () => setActive(name) }
style={{ color: active === name ? "red" : "green" }}
>
{ name }
</p>
)
return (
<>
{ cities.map(city => <City name={ city } />) }
</>
);
};
你可以在这里找到我的工作代码和框:https://codesandbox.io/s/o58342l64z
为了个人的清晰度,我还自由重构了一点。
我在使用 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>;
})}
</>
);
};
我遇到的问题是每次我点击一个城市时它会变成 red
,但是我只希望一个城市在任何时候都变成红色(即最近点击的城市)。
如果这个问题有任何不清楚的地方,请告诉我。
在 class 组件中,我想我可能会做类似于 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>)}
</>
);
};
如果只有一个城市可以是红色的,你不应该在循环中使用钩子(实际上你不应该这样做)而是在渲染之上保持一个单一的活动状态,比如:
const App = ({ cities = ["London", "Manchester", "Leeds"] }) => {
const [active, setActive] = useState(false)
const City = ({ name }) => (
<p
onClick={ () => setActive(name) }
style={{ color: active === name ? "red" : "green" }}
>
{ name }
</p>
)
return (
<>
{ cities.map(city => <City name={ city } />) }
</>
);
};
你可以在这里找到我的工作代码和框:https://codesandbox.io/s/o58342l64z
为了个人的清晰度,我还自由重构了一点。