react material ui 自动完成元素焦点 onclick

Question

我有一个 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" />
  )}
/>;

我希望此元素在我单击按钮时获得焦点。

我尝试使用此处描述的参考文献

它适用于其他元素但不适用于自动完成

请帮忙

Answer 1

您应该保存对 TextField 组件的引用，并在单击另一个元素（触发某个事件后）后使用此引用来聚焦。

let inputRef;

<Autocomplete
  ...
  renderInput={params => (
    <TextField
      inputRef={input => {
        inputRef = input;
      }}
    />
  )}
/>
<button
  onClick={() => {
    inputRef.focus();
  }}

这是一个 link 的工作示例： https://codesandbox.io/s/young-shadow-8typb

You can play with the openOnFocus property of the Autocomplete to decide if you just want focus on the input or you want the dropdown of the autocomplete to open.

Answer 2

根据 material 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>

干杯！！！

react material ui 自动完成元素焦点 onclick

react material ui autocomplete element focus onclick

javascript

autocomplete

reactjs

material-ui