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

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();
  }}

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

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