如何在React Material-UI Autocomplete无匹配结果时触发事件并展示新增按钮

方案1：直接通过noOptionsText属性渲染按钮（最简便） #

你不需要单独监听无匹配事件，noOptionsText本身支持传入任意React节点，直接把新增按钮放进去即可，默认会在无匹配选项时自动渲染，示例代码：

import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';
import Button from '@mui/material/Button';

const options = ['选项1', '选项2', '选项3'];

function MyAutocomplete() {
  const handleAddNew = () => {
    // 此处写新增选项的业务逻辑
    console.log('触发新增操作');
  };

  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="选择项" />}
      noOptionsText={
        <Button onClick={handleAddNew} variant="text" fullWidth>
          新增
        </Button>
      }
    />
  );
}

方案2：需要监听无匹配状态做额外逻辑的实现 #

可以通过filterOptions回调拿到过滤后的结果，判断结果长度是否为0即可捕获无匹配场景：

import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';

const filter = createFilterOptions();
const options = ['选项1', '选项2', '选项3'];

function MyAutocomplete() {
  const handleNoOptions = () => {
    // 无匹配时的额外触发逻辑
    console.log('当前无匹配选项');
  };

  const handleAddNew = () => {
    // 新增选项逻辑
  };

  return (
    <Autocomplete
      options={options}
      renderInput={(params) => <TextField {...params} label="选择项" />}
      filterOptions={(options, params) => {
        const filtered = filter(options, params);
        if (filtered.length === 0) {
          handleNoOptions();
        }
        return filtered;
      }}
      noOptionsText={
        <Button onClick={handleAddNew} variant="text" fullWidth>
          新增
        </Button>
      }
    />
  );
}

• 你可以直接在filterOptions里自定义过滤规则，不需要依赖额外的状态监听
• 如果需要自定义无选项区域的样式，可以通过修改CSS类名.MuiAutocomplete-noOptions的样式实现

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