MUI 自动完成:如何防止打开焦点,而不是打开输入更改?
MUI Autocomplete: How to prevent open on focus, instead open on input change?
我试图阻止自动完成功能在用户点击后立即打开建议。我希望它只在用户开始输入时打开。似乎没有实现这一目标的道具。
有没有一种方法可以使用 onInputChange 来切换自动完成 'open' 道具(bool)。
谢谢
是的,您可以显式控制 open
属性,如果您希望基于用户输入的内容,那么我建议您也显式控制 inputValue
属性。
下面是执行此操作的一种方法的工作示例。除了通常指定的道具外,这还指定了 onOpen、onClose、onInputChange、open 和 inputValue 道具。
只要 onOpen
认为 open
应该设置为 true
,它就会得到 called by Material-UI。 handleOpen
在下面的示例中,当 inputValue
为空时忽略此事件。
只要 onClose
认为 open
应该设置为 false
,它就会得到 called by Material-UI。下面的示例无条件调用 setOpen(false)
,以便它在所有与默认行为相同的场景中仍然关闭。
handleInputChange
在下面的示例中,除了管理 inputValue
状态外,还会根据值是否为空来切换 open
状态。
/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
export default function ComboBox() {
const [inputValue, setInputValue] = React.useState("");
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
if (inputValue.length > 0) {
setOpen(true);
}
};
const handleInputChange = (event, newInputValue) => {
setInputValue(newInputValue);
if (newInputValue.length > 0) {
setOpen(true);
} else {
setOpen(false);
}
};
return (
<Autocomplete
id="combo-box-demo"
open={open}
onOpen={handleOpen}
onClose={() => setOpen(false)}
inputValue={inputValue}
onInputChange={handleInputChange}
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 }
// and many more options
];
我试图阻止自动完成功能在用户点击后立即打开建议。我希望它只在用户开始输入时打开。似乎没有实现这一目标的道具。 有没有一种方法可以使用 onInputChange 来切换自动完成 'open' 道具(bool)。 谢谢
是的,您可以显式控制 open
属性,如果您希望基于用户输入的内容,那么我建议您也显式控制 inputValue
属性。
下面是执行此操作的一种方法的工作示例。除了通常指定的道具外,这还指定了 onOpen、onClose、onInputChange、open 和 inputValue 道具。
-
只要
onOpen
认为open
应该设置为true
,它就会得到 called by Material-UI。handleOpen
在下面的示例中,当inputValue
为空时忽略此事件。
只要 onClose
认为open
应该设置为false
,它就会得到 called by Material-UI。下面的示例无条件调用setOpen(false)
,以便它在所有与默认行为相同的场景中仍然关闭。handleInputChange
在下面的示例中,除了管理inputValue
状态外,还会根据值是否为空来切换open
状态。
/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
export default function ComboBox() {
const [inputValue, setInputValue] = React.useState("");
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
if (inputValue.length > 0) {
setOpen(true);
}
};
const handleInputChange = (event, newInputValue) => {
setInputValue(newInputValue);
if (newInputValue.length > 0) {
setOpen(true);
} else {
setOpen(false);
}
};
return (
<Autocomplete
id="combo-box-demo"
open={open}
onOpen={handleOpen}
onClose={() => setOpen(false)}
inputValue={inputValue}
onInputChange={handleInputChange}
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
}
// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
const top100Films = [
{ title: "The Shawshank Redemption", year: 1994 },
{ title: "The Godfather", year: 1972 },
{ title: "The Godfather: Part II", year: 1974 }
// and many more options
];