React实现下拉选中货币同步修改按钮文本需求及代码求助

核心修改思路 #

• 新增状态selectedCurrency存储当前选中的货币文本，初始值设为默认显示的"USD"
• 给下拉菜单的每个选项绑定点击事件，点击时更新选中状态并关闭下拉列表
• 将按钮的显示文本与selectedCurrency状态绑定，实现实时同步
• 注意JSX中需用className替代原生HTML的class属性

修改后的App.js代码 #

import './App.css'
import React, { useState } from "react";

export default function App() {
  const [listopen, setListopen] = useState(false);
  // 新增状态存储选中的货币
  const [selectedCurrency, setSelectedCurrency] = useState("USD");

  const toggleDropdown = () => {
    setListopen(prev => !prev);
  };

  // 处理货币选项点击的函数
  const handleCurrencySelect = (currency) => {
    setSelectedCurrency(currency);
    setListopen(false); // 选中后关闭下拉菜单
  };

  return (
    <main>
      <nav>
        <ul>
          <div className="dropdown">
            <li>
              <button className="dropbtn" onClick={toggleDropdown}>
                {selectedCurrency}
              </button>
            </li>
            <div 
              className="dropdown-content" 
              id="myDropdown" 
              style={{ display: listopen ? 'block' : 'none' }}
            >
              {/* 给每个选项绑定点击事件，传递对应文本 */}
              <a href="/" onClick={() => handleCurrencySelect("AUD($)")}>AUD($)</a>
              <a href="/" onClick={() => handleCurrencySelect("USD($)")}>USD($)</a>
              <a href="/" onClick={() => handleCurrencySelect("PKR($)")}>PKR($)</a>
            </div>
          </div>
        </ul>
      </nav>
    </main>
  )
}

关键修改说明 #

• 用toggleDropdown简化原有的下拉菜单切换逻辑，通过状态反转实现显示/隐藏
• handleCurrencySelect函数统一处理选项点击逻辑，同时完成选中文本更新和下拉菜单关闭操作
• 按钮文本替换为{selectedCurrency}，实现状态与视图的自动同步
• 将所有class属性改为className，符合JSX语法规范

内容的提问来源于stack exchange，提问作者Afeef Raza