React结合Materialize CSS下拉框focus方法失效问题求助

这个问题其实是Materialize下拉组件的特性导致的——它并没有直接使用原生<select>的交互逻辑，而是把原生select隐藏，转而渲染了一套自定义的触发按钮+下拉菜单结构。所以直接调用原生的focus()方法在select元素上，自然看不到任何响应。

下面给你一套适配React的具体解决方案：

步骤1：初始化Materialize下拉实例 #

在React组件挂载完成后，需要先初始化Materialize的Dropdown实例，这样我们才能调用它提供的控制方法：

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

function YourComponent() {
  // 保存原生select的DOM引用
  const selectRef = useRef(null);
  // 保存Materialize Dropdown实例的引用
  const dropdownInstanceRef = useRef(null);

  useEffect(() => {
    // 组件挂载后初始化Dropdown
    if (selectRef.current) {
      const dropdown = window.M.Dropdown.init(selectRef.current);
      dropdownInstanceRef.current = dropdown;
    }

    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      if (dropdownInstanceRef.current) {
        dropdownInstanceRef.current.destroy();
      }
    };
  }, []);

步骤2：实现下拉框的“聚焦”逻辑 #

这里的“聚焦”其实是两个动作的结合：展开下拉菜单，同时让触发按钮获得焦点（模拟文本框聚焦的视觉反馈）：

const focusDropdown = () => {
    if (dropdownInstanceRef.current) {
      // 调用Materialize的open方法展开下拉菜单
      dropdownInstanceRef.current.open();
      // 聚焦下拉框的触发按钮（Materialize自动生成的元素）
      dropdownInstanceRef.current.el.nextElementSibling.focus();
    }
  };

步骤3：在组件中使用 #

把ref绑定到select元素上，然后在需要触发聚焦的地方调用focusDropdown方法即可：

return (
    <div className="container">
      <input 
        type="text" 
        placeholder="普通文本框"
        onClick={(e) => e.target.focus()}
      />
      
      <select ref={selectRef} className="browser-default">
        <option value="">请选择</option>
        <option value="1">选项1</option>
        <option value="2">选项2</option>
      </select>

      <button className="btn" onClick={focusDropdown}>
        聚焦下拉框
      </button>
    </div>
  );
}

export default YourComponent;

关键说明 #

• Materialize会给下拉框生成一个.select-wrapper容器，里面包含触发按钮和隐藏的原生select，直接操作原生select无法触发视觉上的聚焦效果。
• 通过调用Materialize提供的open()方法展开菜单，同时聚焦触发按钮，就能和文本框的聚焦体验保持一致。

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