React与Material CSS：移除browser-default后下拉组件异常的解决方法

我来帮你搞定这个问题——这个坑我之前开发的时候也踩过，核心原因是Materialize CSS（你说的Material CSS应该是它）的自定义下拉组件并不是直接基于原生<select>工作的，咱们一步步来解决：

为什么移除browser-default后组件失效？ #

Materialize CSS默认会对原生<select>做特殊处理：它会把原生select隐藏，然后生成一套自定义的DOM结构来模拟下拉菜单的视觉样式和交互。但这套自定义结构需要手动初始化才能生效，而browser-default类的作用就是告诉Materialize不要处理这个select，保留原生样式和行为。所以你一移除这个类，Materialize就会尝试替换原生select，但没初始化的话，自定义结构没生成，自然就“无法正常工作”了。

正确的解决步骤（针对Materialize CSS） #

1. 调整组件结构符合Materialize要求 #

首先要把label和select放到input-field类的容器里，这是Materialize表单组件的标准结构：

return (
  <div className="input-field">
    {/* 给label加上htmlFor，和select的id对应，提升可访问性 */}
    <label htmlFor={input.name}>{label}</label>
    <select {...input} id={input.name}>
      {/* 可以加一个默认的禁用选项，提升用户体验 */}
      <option value="" disabled>请选择</option>
      {this.generateValues(indexes)}
    </select>
  </div>
);

2. 在组件挂载/更新时初始化Select组件 #

Materialize不会自动监听React渲染后的DOM变化，所以需要我们手动调用初始化方法：

如果是类组件：

componentDidMount() {
  // 初始化页面上所有的select组件，或者精准定位当前组件的select
  const selectElems = document.querySelectorAll('select');
  M.FormSelect.init(selectElems);
}

// 当选项数据变化时（比如indexes更新），需要重新初始化
componentDidUpdate(prevProps) {
  if (prevProps.indexes !== this.props.indexes) {
    const selectElems = document.querySelectorAll('select');
    // 先销毁旧的实例，再重新初始化
    M.FormSelect.init(selectElems, {}, true);
  }
}

如果是函数组件（用React Hooks）：

import { useEffect } from 'react';

// ...

useEffect(() => {
  const selectElems = document.querySelectorAll('select');
  const instances = M.FormSelect.init(selectElems);
  
  // 组件卸载时清理实例
  return () => {
    instances.forEach(instance => instance.destroy());
  };
}, [indexes]); // 当indexes变化时重新初始化

如果你其实用的是Material-UI（容易和Materialize混淆） #

如果是Material-UI（@mui/material），那应该直接用它提供的Select组件，而不是原生<select>，这样不需要任何额外的类或初始化，直接就能获得Material风格的下拉：

import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';

return (
  <FormControl sx={{ minWidth: 120 }}>
    <InputLabel id={`select-label-${input.name}`}>{label}</InputLabel>
    <Select
      labelId={`select-label-${input.name}`}
      {...input}
      label={label}
    >
      <MenuItem value="">
        <em>无</em>
      </MenuItem>
      {/* 假设generateValues返回的是包含value和label的对象数组 */}
      {this.generateValues(indexes).map(option => (
        <MenuItem key={option.value} value={option.value}>
          {option.label}
        </MenuItem>
      ))}
    </Select>
  </FormControl>
);

这样不管哪种情况，都能完美解决移除browser-default后组件失效的问题，同时获得Material风格的视觉效果~

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