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

ReactJS材质UI如何防止自动完成更改值,reactjs,autocomplete,material-ui,Reactjs,Autocomplete,Material Ui,我有一个自动完成组件,我需要阻止它选择某种值 const options = ["Option 1", "Option 2", "Option 3"]; const [value, setValue] = React.useState(options[0]); const [inputValue, setInputValue] = React.useState(""); const change = (event

我有一个自动完成组件,我需要阻止它选择某种值

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

const [value, setValue] = React.useState(options[0]);
const [inputValue, setInputValue] = React.useState("");

const change = (event, newValue) => {
  event.preventDefault();
  event.stopPropagation();
  if (newValue !== "Option 3") {
    setValue(newValue);
  }
};

console.log(value);

return (
  <div>
    <Autocomplete
      value={value}
      onChange={change}
      inputValue={inputValue}
      onInputChange={(event, newInputValue) => {
        setInputValue(newInputValue);
      }}
      id="controllable-states-demo"
      disableClearable
      options={options}
      style={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="Controllable" variant="outlined" />
      )}
    />
  </div>
);
const options=[“选项1”、“选项2”、“选项3];
const[value,setValue]=React.useState(选项[0]);
常量[inputValue,setInputValue]=React.useState(“”);
常量更改=(事件,新值)=>{
event.preventDefault();
event.stopPropagation();
如果(新值!=“选项3”){
设置值(新值);
}
};
console.log(值);
返回(

是沙箱。

您在此处再次设置值,请勿更新此事件

onInputChange={(event, newInputValue) => {
   setInputValue(newInputValue);
}}
设置inputValue={value}

更新于此,