点击重置按钮时如何将Material UI Autocomplete重置为默认/初始值

首选方案：受控组件实现（推荐） #

该方案适配所有场景，包括多选、对象类型选项、动态下拉选项等复杂需求，逻辑完全可控。

核心思路是将Autocomplete的value属性绑定到React state，点击重置时直接将state修改为初始值即可。

完整代码示例：

import { useState } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

// 定义初始值和下拉选项
const INITIAL_VALUE = '默认选项';
const OPTIONS = ['默认选项', '选项1', '选项2', '选项3'];

export default function AutoCompleteResetDemo() {
  // 绑定选中值到state
  const [selectedVal, setSelectedVal] = useState(INITIAL_VALUE);

  const handleReset = () => {
    // 重置为初始值
    setSelectedVal(INITIAL_VALUE);
  };

  return (
    <div style={{ width: 300, padding: 20 }}>
      <Autocomplete
        value={selectedVal}
        onChange={(event, newValue) => setSelectedVal(newValue)}
        options={OPTIONS}
        renderInput={(params) => <TextField {...params} label="选择项" />}
      />
      <Button 
        variant="contained" 
        onClick={handleReset} 
        sx={{ marginTop: 2 }}
      >
        重置
      </Button>
    </div>
  );
}

注意事项 #

• 必须使用受控模式绑定value属性，不要依赖非受控的defaultValue做重置逻辑，后者无法响应外部state变更
• 如果选项为对象结构，必须添加isOptionEqualToValue属性自定义匹配规则，避免值和选项匹配失败导致重置不生效，示例：

  const OPTIONS = [{ label: '默认选项', id: 0 }, { label: '选项1', id: 1 }];
  const INITIAL_VALUE = OPTIONS[0];
  
  // Autocomplete组件新增属性
  isOptionEqualToValue={(option, value) => option.id === value.id}
  

• 多选场景仅需添加multiple属性，初始值改为对应数组格式即可，重置逻辑完全一致

备选方案：非受控模式+ref（仅简单场景使用） #

如果你的场景非常简单，不需要额外控制选中值逻辑，可以用ref调用组件内置的reset方法实现重置：

import { useRef } from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

const OPTIONS = ['默认选项', '选项1', '选项2', '选项3'];

export default function AutoCompleteResetDemo() {
  const autoCompleteRef = useRef(null);

  const handleReset = () => {
    autoCompleteRef.current?.reset();
  };

  return (
    <div style={{ width: 300, padding: 20 }}>
      <Autocomplete
        ref={autoCompleteRef}
        defaultValue="默认选项"
        options={OPTIONS}
        renderInput={(params) => <TextField {...params} label="选择项" />}
      />
      <Button 
        variant="contained" 
        onClick={handleReset} 
        sx={{ marginTop: 2 }}
      >
        重置
      </Button>
    </div>
  );
}

注意事项 #

• 该方案仅会将值恢复到defaultValue设置的初始值，无法适配动态初始值、联动重置等复杂场景
• 非受控模式下无法监听选中值变更做额外逻辑处理，复杂场景还是推荐使用受控方案

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