React のトグル状態値

インターネットの黎明期から、フロントエンド開発者は JavaScript を使用して動的でインタラクティブな機能を Web ページに追加してきました。 最近の Web アプリケーションの構築プロセスは、20 年前とは大きく異なります。

開発者は、動的でインタラクティブな機能を備えた Web アプリを構築する必要があります。 JavaScript ベースのフレームワークを使用する傾向があります。

React は、最新のユーザー インターフェイスを構築するために特に人気があります。 アプリに動的機能を追加できる内部状態を維持します。

この記事では、React で状態変数を切り替える方法について説明します。

React のトグル状態値

React では、すべてのコンポーネントに状態があります。 開発者は、多くの場合、状態を使用してユーザーからの入力をキャプチャします。

たとえば、最近では、Web サイトのライト モードまたはダーク モード バージョンを使用するオプションをユーザーに提供するのが一般的です。

React でこの機能を実装するには、状態変数 nightMode (またはその他のわかりやすい変数名) を true または false に設定する必要があります。 次に、条件付きスタイリングを使用して、この変数の現在の値に応じて背景とテキストの色を変更できます。

例を見てみましょう：

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

この場合、nightMode 変数はデフォルトで false に設定されています。 ただし、ダーク モードを使用する選択肢をユーザーに提供したいと考えています。また、ユーザーがダーク モードを気に入らない場合は、通常のモードに戻すオプションを提供したいと考えています。

そのためには、React トグル状態を使用する必要があります。 ライブ CodeSandbox デモ にアクセスして、サンプル コードを実際に試してみてください。

入力要素の変更をキャプチャする

上記の例は、最も単純な例です。ボタンをクリックすると、nightMode 状態変数の現在の値が切り替わります。 または、チェックボックスまたは別の要素を使用して、React の状態変数を切り替えることができます。

HTML 要素によっては、適切なイベントのイベント ハンドラーを起動する必要があります。 ボタンの場合、onClick 属性を使用して、ユーザーのクリックに応じて変更を加えます。

チェックボックスを使用する場合は、代わりに onChange 属性を使用することをお勧めします。

クラス コンポーネントの状態を更新する

上記の例では、useState() フックを使用して React の状態変数を更新しました。 このフックは、React バージョン 16.8 以降のバージョンを実行している場合にのみ使用できます。

一部の開発者は、フックが使用可能であっても、クラス コンポーネントを作成することを好みます。

React 開発者が状態オブジェクトを直接変更することは禁止されています。 クラスコンポーネントの状態を更新するには、setState() メソッドを使用する必要があります。

特定のプロパティの値のみを切り替えたい場合でも、引数は状態オブジェクト全体である必要があります。 特定のプロパティの値を変更しても、オブジェクト全体を渡します。

例を見てみましょう：

class App extends React.Component {
  constructor() {
  super();
  this.state = {nightMode: false};
  }
  render() {
    const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
    return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setState({nightMode: !this.state.nightMode})}>
        Toggle state variable
      </button>
    </div>
  );
  }
}

クラス コンポーネントで状態を初期化するには、機能コンポーネント フックよりも多くのコード行が必要です。 ご覧のとおり、constructor() を使用して初期の state オブジェクトを作成しました。

JSX 内で setState() メソッドを使用して nightMode プロパティの値を更新しました。 新しい state オブジェクトを setState() メソッドの最初の引数として渡しました。

React で状態を切り替えるには、nightMode プロパティの新しい値を現在の値の反対に設定します。

機能コンポーネントの状態を更新する

サンプルコードをもう一度見てみましょう。

export default function App() {
  let [nightMode, setNightMode] = useState(false);
  const applyNightMode = {
    backgroundColor: nightMode ? "black" : "white",
    color: nightMode ? "white" : "black",
    height: "300px"
  };
  return (
    <div className="App" style={applyNightMode}>
      <h1>Hello to our web app</h1>
      <button onClick={() => setNightMode(!nightMode)}>
        Toggle state variable
      </button>
    </div>
  );
}

useState() フックは 2つの値を返します: 状態値 (nightMode 変数に格納されています) と、この特定の変数を更新する関数 (setNightMode 変数に格納されています)。

このように変数に名前を付けるのが慣例です。状態変数にはわかりやすい名前を付け、それを更新する関数には set+variableName を付けます。

クリック イベントのハンドラ関数は単純です。 反対の演算子!を使用しました setNightMode() 関数を実行して、状態変数の値を現在とは反対の値に設定しました。