反应物料界面自动完成元素焦点点击

Question

我有一个材质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

根据material ui早期版本4或当前版本5，您可以使用autoFocus道具简单地聚焦自动完成输入元素，如果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>

干杯！！！

Answer 2

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

let inputRef;

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

以下是指向一个工作示例的链接：https://codesandbox.io/s/young-shadow-8typb

您可以使用Autocomplete的openOnFocus属性来决定是只关注输入，还是打开Autocomplete的下拉列表。