React表单中Dropdown列表点击不显示问题求助

安全阿岳

2026-7-6

问题根源

你的Dropdown组件中，状态更新逻辑setIsOpen(!isOpen)存在闭包陷阱：React状态更新是异步的，当组件重新渲染（比如页面刷新后），直接引用当前isOpen值可能拿到的是旧的状态快照，导致无法正确切换下拉列表的显示状态。

修复方案

在Dropdown.jsx中，将状态更新改为函数式更新，确保每次都基于最新的状态值进行切换：

// 原代码
const toggleDropdown = () => {
  setIsOpen(!isOpen);
};

// 修改后
const toggleDropdown = () => {
  setIsOpen(prevIsOpen => !prevIsOpen);
};

可选优化：点击外部关闭下拉

如果需要提升用户体验，添加点击下拉区域外部自动关闭的逻辑，避免下拉列表一直显示：

import { useState, useEffect, useRef } from 'react';

const Dropdown = () => {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useRef(null);

  const toggleDropdown = () => {
    setIsOpen(prevIsOpen => !prevIsOpen);
  };

  // 监听页面点击事件，点击外部关闭下拉
  useEffect(() => {
    const handleOutsideClick = e => {
      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
        setIsOpen(false);
      }
    };

    document.addEventListener('mousedown', handleOutsideClick);
    return () => document.removeEventListener('mousedown', handleOutsideClick);
  }, []);

  return (
    <div className="dropdown-container" ref={dropdownRef}>
      <button onClick={toggleDropdown} className="dropdown-button">
        选择选项
      </button>
      {isOpen && (
        <ul className="dropdown-list">
          <li className="dropdown-item">选项1</li>
          <li className="dropdown-item">选项2</li>
          <li className="dropdown-item">选项3</li>
        </ul>
      )}
    </div>
  );
};

export default Dropdown;