web-dev-qa-db-ja.com

フック反応でアクティブ状態を切り替える

私は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に変わるということですが、一度に1つだけ赤にしたいのです（つまり、最後にクリックしたもの）。

この質問で不明な点がある場合はお知らせください。

クラスコンポーネントでは、 this のようなものを潜在的に実行すると思います。

コードサンドボックス こちら を参照してください。

javascriptreactjsecmascript-6react-hooks
3
peter flanagan

一度に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>)}
        </>
    );
};
5
Treycos

単一の都市だけが赤になる可能性がある場合は、ループ内でフックを使用しないでください（実際には絶対に実行してはならないことです）、レンダリングの上に単一のアクティブな状態を維持します。

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

私はまた、個人的な明快さのために少し自由にリファクタリングすることもしました。

1
0xc14m1z