ReactJS Material UI如何防止自动完成更改值

要防止Material UI的Autocomplete组件自动更改值，您可以使用onInputChange事件来控制它

import React, { useState } from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";

const options = ["Option 1", "Option 2", "Option 3"];

export default function App() {
  const [inputValue, setInputValue] = useState("");
  const [selectedValue, setSelectedValue] = useState(null);

  const handleInputChange = (event, value) => {
    setInputValue(value);
  };

  const handleChange = (event, value) => {
    setSelectedValue(value);
  };

  return (
    <Autocomplete
      options={options}
      inputValue={inputValue}
      onInputChange={handleInputChange}
      onChange={handleChange}
      value={selectedValue}
      renderInput={(params) => (
        <TextField
          {...params}
          label="Choose an option"
          variant="outlined"
        />
      )}
    />
  );
}

在此示例中，我们使用onInputChange事件处理程序来控制输入值。当用户输入时，handleInputChange函数会更新inputValue状态，但不会更改selectedValue状态。handleChange函数仅在用户选择选项时更新selectedValue。

这样，只有在用户明确选择了一个选项时，Autocomplete组件的值才会更改，从而防止自动完成更改输入值。