React结合Material-UI实现Select选中后替换为对应div的交互咨询

原代码存在的核心问题 #

这些问题会直接导致交互完全失效，需要优先修正：

• 没有引入React状态跟踪用户选中值，Select处于完全不受控状态，无法捕捉选中行为。原代码里写的value={test_options.name}也完全无效——test_options是数组结构，本身不存在name属性，运行时取不到有效值
• 把自定义色块div直接塞到MenuItem里当下拉选项内容，会导致下拉打开时，每个列表项直接展示红/蓝色块，不符合“下拉选项仅显示名称文本”的要求
• 没有做条件渲染分支，选中后自然无法实现“替换Select展示对应div”的逻辑
• 原代码里给Select加的key={test_options.name}属于无效写法，运行时key会被识别为undefined，可直接删除

具体实现步骤 #

• 引入useState Hook，存储当前选中的选项名称，初始值设为空字符串
• 将静态选项配置test_options移到组件外部作用域，避免每次组件重渲染都重复生成新的JSX对象，减少不必要的性能损耗
• 给Select组件绑定onChange事件，用户选中选项时，把选中的名称值更新到状态中
• 增加条件渲染判断：未选中状态下渲染原来的Select下拉组件，下拉列表项仅展示选项的name文本；选中状态下直接从配置中匹配对应项的div内容渲染，完全移除Select组件

完整可运行代码 #

import React, { useState } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

// 静态配置移到组件外部，避免重复生成JSX
const test_options = [
  {
    name: "DIV 1",
    div: (
      <div style={{ backgroundColor: "red", height: 50, width: 100 }}>
        Div 1
      </div>
    ),
  },
  {
    name: "DIV 2",
    div: (
      <div style={{ backgroundColor: "blue", height: 50, width: 100 }}>
        Div 2
      </div>
    ),
  },
];

export default function DropdownTest() {
  // 跟踪选中的选项名称，初始为空展示下拉组件
  const [selectedName, setSelectedName] = useState("");

  // 匹配当前选中项对应的div
  const selectedDiv = test_options.find(item => item.name === selectedName)?.div;

  return (
    <>
      {!selectedDiv ? (
        <FormControl variant="outlined" style={{ width: 200 }}>
          <InputLabel id="demo-simple-select-outlined-label">
            Select a div
          </InputLabel>
          <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={selectedName}
            label="Select a div"
            onChange={(e) => setSelectedName(e.target.value)}
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            {test_options.map((options) => (
              <MenuItem 
                button 
                key={options.name} 
                value={options.name}
              >
                {/* 下拉项仅展示名称文本 */}
                {options.name}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      ) : (
        // 选中后替换下拉组件，直接展示对应div
        selectedDiv
      )}
    </>
  );
}

补充说明 #

如果需要支持从已展示的div回退到下拉选择状态，只需要给展示div的外层容器加点击事件，把状态中的selectedName重置为空字符串即可，无需修改其他逻辑。

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