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组件的引用，并在单击另一个元素（一旦触发某些事件）后使用此ref进行焦点。

let inputRef;

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

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

您可以使用“自动完成”的openOnFocus属性来决定是只专注于输入还是要打开自动完成的下拉菜单。

对物料进行反应ui自动完成元素集中onclick

1 个答案: