javascript - 用钩子(Hook) react 切换事件状态

Question

我在使用 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 .

Answer 1

如果一次只能选择一个城市，则不需要为所有城市都设置州值。只需将当前选定的一个保留在单个状态属性中:

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>)}
        </>
    );
};