UseStateを使用して、Reactの複数のボタンのステータスを動的に切り替える-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

UseStateを使用して、Reactの複数のボタンのステータスを動的に切り替える

Susan Sarandon

Sep 08, 2025 am 08:42 AM

UseStateを使用して、Reactの複数のボタンのステータスを動的に切り替える

本文介绍了如何在React中使用useState Hook动态地切换多个按钮的状态，实现点击一个按钮时，该按钮对应的提示信息显示，同时其他按钮的提示信息隐藏的功能。通过维护一个状态变量来记录当前选中的按钮，并根据该状态动态渲染提示信息，可以有效地管理多个按钮的交互行为。

在React中，动态切换多个按钮的状态，例如实现点击一个按钮显示对应的提示信息，并隐藏其他按钮的提示信息，是一个常见的交互需求。这可以通过useState Hook来轻松实现。核心思想是维护一个状态变量，该变量存储当前被选中的按钮的标识符，然后根据该状态变量的值来决定哪些提示信息需要显示。

以下是一个示例代码，展示了如何实现这个功能：

import React, { useState } from "react";

function App() {
  const [selectedBtn, setSelectedBtn] = useState("");
  const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];

  return (
    <div>
      <h1>动态切换按钮提示信息</h1>
      {faqTipBtns.map((button) => (
        <div key="{button}">
          {selectedBtn === button ? <div> 提示信息：{button}</div> : null}
          <button onclick="{()"> setSelectedBtn(button)}>{button}</button>
        </div>
      ))}
    </div>
  );
}

export default App;

代码解释:

useState(""): 初始化一个名为selectedBtn的状态变量，初始值为空字符串。这个变量将用于存储当前被选中的按钮的标识符。
faqTipBtns: 一个包含所有按钮标识符的数组。
faqTipBtns.map((button) => ...): 遍历faqTipBtns数组，为每个按钮渲染一个div元素。
selectedBtn === button ?
提示信息：{button}
: null: 这是一个条件渲染。如果当前按钮的标识符与selectedBtn状态变量的值相等，则显示对应的提示信息；否则，不显示任何内容。
: 为每个按钮添加一个onClick事件处理函数。当按钮被点击时，setSelectedBtn(button)会被调用，将当前按钮的标识符更新到selectedBtn状态变量中。

注意事项:

唯一Key值: 在使用 map 函数渲染列表时，请务必为每个列表项添加唯一的 key 属性，这有助于 React 优化渲染性能。
状态管理: 对于更复杂的状态管理需求，可以考虑使用 Context API 或 Redux 等状态管理工具。
代码复用: 可以将按钮和提示信息的渲染逻辑封装成一个独立的组件，以提高代码的可复用性。

总结:

通过使用useState Hook，我们可以轻松地实现动态切换多个按钮状态的功能。核心在于维护一个状态变量来记录当前选中的按钮，并根据该状态动态渲染UI。这种方法简单有效，适用于大多数需要动态切换按钮状态的场景。

以上がUseStateを使用して、Reactの複数のボタンのステータスを動的に切り替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

PHP チュートリアル

1675

276

NYTの接続はヒントと回答です

311

836

Setting up and using Magic Mouse in Windows

Related knowledge

JavaScriptのデータ属性によってどのように要素を選択しますか？ Aug 30, 2025 am 01:57 AM

これを実現するには、css属性セレクターを介してjavascriptのデータ属性を持つ要素を選択し、document.queryselector（）またはdocument.queryselectorall（）メソッドを使用できます。 1. [データアトリブ]を使用して、指定されたデータ属性（任意の値）を持つ要素を選択します。 2。[data-attribute = "value"]を使用して、属性値が正確に一致する要素を選択します。 3。data-user-idがdataset.useridに対応する場合、element.datasetを介してデータ属性にアクセスします（置き換えます

営業日と労働時間ごとに実行されるJavaScriptカウンターをビルドする Aug 31, 2025 am 06:30 AM

この記事では、JavaScriptを使用して正確なタイミングカウンターを構築する方法について詳しく説明します。カウンターは1分に1回増加しますが、プリセットの営業日（月曜日から金曜日）および労働時間（午前6時から午後8時など）内でのみ走ります。非稼働時間中に増分を一時停止できますが、現在の値を表示し、毎月初日に自動的にリセットして、カウントロジックの正確性と柔軟性を確保します。

Pytest and Selenium：動的なデータ駆動型テストのための実装戦略 Aug 30, 2025 am 06:00 AM

この記事の目的は、 @pytest.mark.mark.parametrizeデコレーターが、動的なデータ駆動型テストにpytestとセレンを使用するときに実行時に生成されたデータを直接処理できないという問題を解決することを目的としています。 pytest.mark.mark.parametrizeの制限を詳細に調査し、Pytestのpytest_generate_testsフック機能を介したSelenium動的データ収集に基づいてパラメーター化されたテストを優雅に実装する方法を詳細に紹介し、テストケースの柔軟性と効率を確保します。

JavaScriptは、クリックスルーイメージの切り替え効果を実現します：プロフェッショナルチュートリアル Sep 18, 2025 pm 01:03 PM

この記事では、JavaScriptを使用して画像をクリックする効果を実現する方法を紹介します。コアのアイデアは、HTML5のデータ - *属性を使用して、代替画像パスを保存し、JavaScriptを介してクリックイベントをリッスンし、SRC属性を動的に切り替えて、画像の切り替えを実現することです。この記事では、詳細なコードの例と説明を提供して、この一般的に使用されるインタラクティブ効果を理解し、習得するのに役立ちます。

jQueryポップアップウィンドウでの動的外部リンクジャンプのイベント処理を最適化する Sep 01, 2025 am 11:48 AM

この記事の目的は、jQueryポップアップウィンドウで外部リンクリダイレクトボタンをリダイレクトする問題を解決することを解決することを目的としています。ユーザーが複数の外部リンクを連続してクリックすると、ポップアップのジャンプボタンは常に最初のクリックリンクを指す場合があります。コアソリューションは、オフ（「クリック」）メソッドを使用して、新しいイベントの各バインディングの前に古いイベントハンドラーを元に戻し、ジャンプ動作が常に最新のターゲットURLを指すようにし、正確で制御可能なリンクリダイレクトを実現することです。

プリロードされたスクリプトによって動的に作成されたDOM要素にどのようにアクセスおよび操作されるか Aug 30, 2025 am 11:57 AM

この記事では、JavaScriptスクリプトがWeb開発でDOM要素を作成する前にロードおよび実行されたときに効果的にアクセスして操作できる方法について説明します。 3つのコア戦略を紹介します。関数の戻り値を介して要素参照を直接渡すこと、カスタムイベントを使用してモジュール間通信を実現し、MutationObserverを使用してDOM構造の変更をリッスンします。これらの方法は、開発者がJavaScriptの実行タイミングと動的なコンテンツの読み込みとの課題を解決し、スクリプトがドラッグ可能になるなどの要素をその後追加することを正しく操作できるようにするのに役立ちます。

JavaScriptの進化：ES2023以降を見る Aug 29, 2025 am 12:18 AM

ES2023は、JavaScriptの成熟した進化を示す多くの実用的な更新を導入しました。 1.Array.prototype.findlast（）およびfindlastIndex（）メソッドは、配列の最後からの検索をサポートし、ログまたは構成の処理効率を改善します。 2.Hashbang構文（＃！/usr/bin/envnode）を有効にして、JavaScriptファイルをUNIXのようなシステムで直接実行できます。 3. error.なぜなら、エラーチェーンをサポートし、例外デバッグ機能を強化します。 4.弱体とセットの仕様により、エンジンの一貫性が向上します。将来、デコレーター（ステージ3）、レコード、タプル（

JavaScriptのオブジェクトプロパティを更新する方法 Sep 04, 2025 am 04:58 AM

UsedOtnotationToupDatePropertiesWithNames; 2.UseBracketNotationFordyNamicorspecialCharacterPropertynames; 3.useobject.Assign（）toupDatemultiplePropertiSorieSorgeObjects、NotingitmutateThateThateThateThateThateThateOoriginalunllassemptyObjumpution;

See all articles

UseStateを使用して、Reactの複数のボタンのステータスを動的に切り替える

ホットAIツール

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

ArtGPT

Stock Market GPT

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック