MUI Autocomplete：如何通过按钮模拟回车键按下操作？

以下是几种可行的解决方法：

方法一：直接调用Autocomplete的setValue方法添加选项 #

这种方式不需要模拟键盘事件，直接操作组件状态，更可靠。

1. 给Autocomplete添加ref，修改按钮点击逻辑：

const autoCompleteRef = useRef(null);
const textFieldRef = useRef(null);

// ...

<Autocomplete
  ref={autoCompleteRef}
  freeSolo
  multiple
  // 其他props...
  renderInput={(params) => (
    <TextField
      {...params}
      inputRef={textFieldRef}
      InputProps={{
        ...params.InputProps,
        endAdornment: (
          <>
            <Box
              onClick={() => {
                const inputValue = textFieldRef.current?.value.trim();
                if (!inputValue) return;
                
                // 获取当前已选择的选项
                const currentValues = autoCompleteRef.current?.state?.value || [];
                // 添加新选项并触发状态更新
                autoCompleteRef.current?.setValue([...currentValues, inputValue], true);
                // 清空输入框
                textFieldRef.current.value = '';
              }}
              sx={{ cursor: 'pointer', padding: '0 8px' }}
            >
              <Text>+</Text>
            </Box>
            {/* 保留原有的endAdornment（如清除按钮） */}
            {params.InputProps.endAdornment}
          </>
        ),
      }}
    />
  )}
/>

方法二：模拟完整的键盘事件序列 #

部分组件需要完整的keydown→keypress→keyup事件序列才能正确响应，同时要开启事件冒泡：

<Box
  onClick={() => {
    const input = textFieldRef.current;
    if (!input) return;

    // 构造带完整参数的回车事件链
    const keydownEvent = new KeyboardEvent('keydown', {
      key: 'Enter',
      bubbles: true,
      cancelable: true,
      code: 'Enter',
      keyCode: 13
    });
    const keypressEvent = new KeyboardEvent('keypress', {
      key: 'Enter',
      bubbles: true,
      cancelable: true,
      code: 'Enter',
      keyCode: 13
    });
    const keyupEvent = new KeyboardEvent('keyup', {
      key: 'Enter',
      bubbles: true,
      cancelable: true,
      code: 'Enter',
      keyCode: 13
    });

    // 依次触发事件
    input.dispatchEvent(keydownEvent);
    input.dispatchEvent(keypressEvent);
    input.dispatchEvent(keyupEvent);
  }}
  sx={{ cursor: 'pointer', padding: '0 8px' }}
>
  <Text>+</Text>
</Box>

方法三：复用回车事件处理逻辑 #

如果已在Autocomplete的onKeyDown中定义了回车处理逻辑，可直接调用该逻辑：

// 定义通用的回车处理函数
const handleEnter = (inputValue) => {
  if (!inputValue) return;
  // 这里写入你的回车处理逻辑，比如添加选项、触发回调等
};

// 按钮点击时调用函数
<Box
  onClick={() => {
    const inputValue = textFieldRef.current?.value.trim();
    handleEnter(inputValue);
    // 清空输入框
    textFieldRef.current.value = '';
  }}
  sx={{ cursor: 'pointer', padding: '0 8px' }}
>
  <Text>+</Text>
</Box>

注意：方法一中要保留原有的params.InputProps.endAdornment，避免丢失Autocomplete默认的清除按钮等组件。

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