React：点击文本切换select标签时全列表项显示问题求助

嘿，这个问题我之前开发React列表组件时也踩过坑！核心原因应该是你用了单个全局状态变量（比如isSelectVisible）来控制所有列表项的Select显示——当你点击任意一项时，这个全局状态变成true，所有绑定它的列表项自然都会跟着显示Select，这就导致了所有项一起变化的问题。

下面给你一个简单直接的解决方案：

步骤1：给每个列表项分配唯一标识 #

首先确保你的列表数据里每个项都有唯一的id（或者其他唯一值，比如name如果不会重复也可以，但id更稳妥），比如：

const listData = [
  { id: 1, name: 'George', text: 'text' },
  { id: 2, name: 'Mikael', text: 'text' }
];

步骤2：用状态跟踪当前激活的项ID #

把原来的布尔状态改成存储当前被点击项的ID，初始值设为null表示没有激活项：

import { useState } from 'react';

function YourComponent() {
  const [activeItemId, setActiveItemId] = useState(null);
  // ...
}

步骤3：渲染时判断当前项是否激活 #

在遍历列表时，只有当当前项的ID和activeItemId匹配时，才渲染Select组件：

return (
  <div className="list-container">
    {listData.map(item => (
      <div key={item.id} className="list-item">
        <span onClick={() => setActiveItemId(item.id)}>
          {item.name} {item.text}
        </span>
        {/* 仅当前激活项显示Select */}
        {activeItemId === item.id && (
          <select>
            <option value="opt1">选项1</option>
            <option value="opt2">选项2</option>
          </select>
        )}
      </div>
    ))}
  </div>
);

额外优化：点击同一项切换显示状态 #

如果需要点击同一文本时可以隐藏Select，把点击事件改成切换逻辑即可：

<span onClick={() => {
  setActiveItemId(prevId => prevId === item.id ? null : item.id);
}}>
  {item.name} {item.text}
</span>

这样调整后，点击哪个列表项的文本，就只会在那一项显示Select，完全符合你的需求啦！

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