Material-UI Hooks版Autocomplete如何在onChange后清空输入框？

我懂你遇到的问题——直接改DOM的input值根本没用，因为Material-UI的Autocomplete内部靠useAutocomplete维护着自己的输入状态，手动改DOM会被组件的状态给覆盖掉。不过别慌，我们可以用受控模式来搞定这个问题，具体做法如下：

核心思路 #

Autocomplete其实提供了inputValue和onInputChange这两个props来控制输入框内容，只是你之前没用到。我们需要：

• 新增一个state专门管理输入框的文本内容
• 在选择选项后的onChange回调里，同时重置选中值value和输入框文本inputValue
• 把这两个state绑定到Autocomplete组件上，让状态和输入框内容同步

修改后的完整代码 #

// @flow
import React, { useRef, useState } from "react";
import "./Autocomplete.scss";
import AutocompleteUI from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

function Autocomplete(props) {
  const { options } = props;
  const [value, setValue] = useState();
  // 新增state用于控制输入框的文本值
  const [inputValue, setInputValue] = useState("");
  const container = useRef();
  const input = useRef();

  function onChange(event, newValue) {
    if (!newValue) return;
    props.onChange(newValue);
    // 同时重置选中项和输入框文本
    setValue(undefined);
    setInputValue("");
  }

  // 同步用户手动输入的内容到inputValue状态
  function handleInputChange(event, newInputValue) {
    setInputValue(newInputValue);
  }

  function renderInput(params) {
    return (
      <TextField
        inputRef={input}
        {...params}
        inputProps={{
          ...params.inputProps,
          autoComplete: "disabled", // 禁用自动补全和填充
        }}
        margin="none"
        fullWidth
      />
    );
  }

  return (
    <div className="Autocomplete-container">
      {value}
      <AutocompleteUI
        ref={container}
        options={options}
        autoHighlight={true} {/* 修正拼写错误：autoHightlight → autoHighlight */}
        clearOnEscape={true}
        autoSelect={true}
        getOptionLabel={option => option.title}
        renderInput={renderInput}
        value={value}
        onChange={onChange}
        // 绑定输入框相关的受控props
        inputValue={inputValue}
        onInputChange={handleInputChange}
      />
    </div>
  );
}

export default Autocomplete;

为什么之前的方法无效？ #

你之前尝试直接修改input.current.value或event.target.value，但Autocomplete内部会在每次渲染时用自身维护的inputValue状态覆盖DOM值，所以这种直接操作DOM的方式是无效的。通过受控模式绑定inputValue，我们让组件状态和输入框内容保持同步，此时重置inputValue就能正确清空输入框了。

另外顺便修正了代码里的一个拼写错误：autoHightlight改成了autoHighlight，不然这个高亮属性不会生效哦～

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