我有一个 material-ui 自动完成元素
<Autocomplete
id="combo-box-demo"
autoHighlight
openOnFocus
autoComplete
options={this.state.products}
getOptionLabel={option => option.productName}
style={{ width: 300 }}
onChange={this.selectProduct}
renderInput={params => (
<TextField {...params} label="Select Product Name" variant="outlined" />
)}
/>;
我希望这个元素在我单击按钮时获得焦点。
我尝试使用这里描述的引用如何以编程方式聚焦输入
它适用于其他元素但不适用于自动完成
请帮忙
您应该保存对TextField组件的引用，并在单击另一个元素时使用此引用来聚焦（一旦触发了某个事件）。
let inputRef;
<Autocomplete
...
renderInput={params => (
<TextField
inputRef={input => {
inputRef = input;
}}
/>
)}
/>
<button
onClick={() => {
inputRef.focus();
}}
这是一个工作示例的链接：https : //codesandbox.io/s/young-shadow-8typb
您可以使用
openOnFocusAutocomplete的属性来决定是只关注输入还是希望打开自动完成的下拉菜单。
根据材料 ui 以前的版本 4 或当前版本 5，您可以使用 autoFocus props简单地聚焦自动完成输入元素，如果 autoFocus 设置为 true，则输入元素将聚焦在自动完成组件的每个第一次安装上。
const [query, setQuery] = useState('');
<Autocomplete
.....
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase
{...params.InputProps}
{...rest}
name="query"
value={query}
onChange={handleSearch}
autoFocus
/>
}}
/>
// 这只是一个例子，您可以根据自己的意愿处理以下功能
function handleOnSearch({ currentTarget = {} }) {
const { value } = currentTarget;
setQuery(value);
}
如果您想在单击按钮后打开自动完成输入：-
//button to be clicked to open autocomplete input
const clickButton=()=>{
setOpen(true)
}
const handleClose =()=>{
setOpen(false)
}
<Dialogue
close={handleClose}
open={open}
>
<DialogActions>
<Autocomplete
.....
renderInput={(params) => {
const { InputLabelProps, InputProps, ...rest } = params;
return <InputBase
{...params.InputProps}
{...rest}
name="query"
value={query}
onChange={handleSearch}
autoFocus
/>
}}
/>
</DialogActions>
</Dialogue>
干杯！！！