Question

我正在使用React钩子，并且遇到了不确定的操作。

我有一个显示城市列表的父组件。

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，但是我只希望一个城市在任何时候都变成红色（即最近被点击的城市）。

如果这个问题不清楚，请告诉我。

在类组件中，我想我可能会做类似于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>)}
        </>
    );
};

Answer 2

如果只有一个城市可以是红色，则不应在循环内使用钩子（实际上您永远不应该这样做），而应在渲染上方保留单个活动状态，例如：

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

为了个人清楚，我还自由地进行了重构。

用钩子切换活动状态

2 个答案: