如何根据下拉框选择值清空Material UI Autocomplete组件的值？

你可以通过在左侧下拉框的onChange事件中同步重置右侧Autocomplete的选中状态来解决这个问题。核心思路是：切换分类（State/Country）时，不仅更新Autocomplete的选项列表，同时将其选中值置为空。

以下是完整的实现代码示例：

import React, { useState } from 'react';
import { Select, MenuItem, FormControl, InputLabel, Autocomplete, TextField } from '@mui/material';

const dropDownVals = [
  { name: "State", values:[{title:"A", flag:true}, {title:"B", flag:false}]},
  { name: "Country", values:[{title:"C", flag:false}, {title:"E", flag:false}]}
];

export default function SyncSelectAndAutocomplete() {
  // 管理选中的分类（State/Country）
  const [selectedCategory, setSelectedCategory] = useState(null);
  // 管理Autocomplete的选中值
  const [selectedOption, setSelectedOption] = useState(null);
  // 管理Autocomplete当前的选项列表
  const [currentOptions, setCurrentOptions] = useState([]);

  // 下拉框切换时的处理逻辑
  const handleCategoryChange = (event) => {
    const selectedName = event.target.value;
    setSelectedCategory(selectedName);
    // 匹配对应分类的选项列表
    const categoryData = dropDownVals.find(item => item.name === selectedName);
    setCurrentOptions(categoryData?.values || []);
    // 重置Autocomplete的选中值
    setSelectedOption(null);
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px' }}>
      {/* 左侧下拉框 */}
      <FormControl sx={{ minWidth: 120 }}>
        <InputLabel>分类</InputLabel>
        <Select
          value={selectedCategory || ''}
          label="分类"
          onChange={handleCategoryChange}
        >
          {dropDownVals.map(item => (
            <MenuItem key={item.name} value={item.name}>{item.name}</MenuItem>
          ))}
        </Select>
      </FormControl>

      {/* 右侧Autocomplete */}
      {selectedCategory && (
        <Autocomplete
          value={selectedOption}
          onChange={(event, newValue) => setSelectedOption(newValue)}
          options={currentOptions}
          getOptionLabel={(option) => option.title}
          renderInput={(params) => (
            <TextField {...params} label={selectedCategory} variant="outlined" />
          )}
        />
      )}
    </div>
  );
}

关键说明： #

• 在handleCategoryChange函数中，每次切换下拉框选项时，通过setSelectedOption(null)主动清空Autocomplete的选中值，彻底避免分类切换后残留旧选中状态。
• Autocomplete的value严格绑定selectedOption状态，onChange事件同步更新该状态，保证选中值与状态完全同步。
• 仅在选中分类后渲染Autocomplete，避免初始无分类时的空值异常（可根据实际需求调整）。

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