如何在MantineUI Select组件打开下拉框后设置默认选中值？

云原生阿岚

2026-7-8

MantineUI v6 Select 实现点击展开后自动选中默认值的方案

完全可以实现这个需求，核心是通过事件监听+状态控制替代直接设置defaultValue，具体步骤和代码如下：

问题分析

你当前代码通过defaultValue={'Asia/Tokyo'}直接设置初始选中值，导致未交互时就显示选中状态，不符合"默认无选中，点击展开后自动选中"的需求。需要改为在下拉展开的时机触发默认值设置。

修改方案

移除defaultValue属性，确保初始状态下value为null（对应你代码里的form.values['timeZone'] ?? null）
监听Select的onDropdownOpen事件，在下拉面板展开时，判断当前是否无选中值，若为真则将值设置为'Asia/Tokyo'

代码示例（基于Mantine Form）

<Select
  data={TIME_ZONE_OPTIONS}
  searchable
  value={form.values['timeZone'] ?? null}
  variant="default"
  onChange={(value) => form.setFieldValue('timeZone', value)}
  onDropdownOpen={() => {
    // 仅当前无选中值时设置默认时区
    if (!form.values['timeZone']) {
      form.setFieldValue('timeZone', 'Asia/Tokyo');
    }
  }}
/>

代码示例（自定义状态管理）

如果没有使用Mantine Form，而是自己维护状态：

import { useState } from 'react';
import { Select } from '@mantine/core';

// 假设TIME_ZONE_OPTIONS已定义
function TimeZoneSelector() {
  const [timeZone, setTimeZone] = useState(null);

  return (
    <Select
      data={TIME_ZONE_OPTIONS}
      searchable
      value={timeZone}
      variant="default"
      onChange={setTimeZone}
      onDropdownOpen={() => {
        if (!timeZone) {
          setTimeZone('Asia/Tokyo');
        }
      }}
    />
  );
}