javascript - 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" />
  )}
/>;

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

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

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

请帮忙

Answer 1

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

let inputRef;

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

这里是一个工作示例的链接: 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.