反应材料 ui 自动完成元素焦点 onclick

Posted 2023-02-22

【中文标题】反应材料 ui 自动完成元素焦点 onclick

【英文标题】：react material ui autocomplete element focus onclick

【发布时间】：2020-07-19 14:22:12

【问题描述】：

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

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

我尝试使用此处描述的引用 how react programmatically focus input

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

请帮忙

【参考方案1】：

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

let inputRef;

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

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

您可以使用自动完成功能的openOnFocus 属性来决定是只想专注于输入还是希望自动完成功能的下拉菜单打开。

【讨论】：

Textfield props inputRef 是关键，很好。

有没有办法在点击时填充自动完成功能？意思是我有一个带按钮的文本字段。我想在单击该按钮时显示自动完成。有什么办法吗？

@S0haibNasir 不确定我理解“单击该按钮时显示自动完成”是什么意思。

在自动完成中，我不想在单击上面示例的组合框时激活它。我想输入一些东西，然后单击某个按钮应该从数据中搜索。像我的数据有国家列表。现在，当我键入 U 时，它显示美国、英国等选项。我希望它在单击一些 btn 后显示选项。就像我输入 Uk 一样，它不应该显示任何选项，但应该有一个按钮来填充该选项。单击该按钮时，应显示英国、乌克兰等。

【参考方案2】：

根据材质 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>

干杯！！！