dropdown - 如何在其父组件挂载时拥有语义 UI React Dropdown 自动对焦？

Question

我正在使用 Semantic React UI's Dropdown ，并且我希望它在其父组件安装后立即获得焦点:用户应该能够立即搜索。

我尝试在父级的 render() 中使用 ref:

<Dropdown ref={dd => (this.MyDropdown = dd)}
        ... />

...然后在父组件的componentDidMount函数中调用focus。但是Dropdown没有focus功能，所以这个方法行不通。

componentDidMount() {
    // I want to do something like the next line here, but 'focus' is not available on the component.
    //this.MyDropdown.focus();
  }

那我应该怎么做呢？

这里是 what I tried so far at codesandbox .注意 componentDidMount 中被注释掉的行。

Answer 1

试试这个:

<Dropdown searchInput={{ autoFocus: true }} />

修改后，您的代码将类似于 this

<Dropdown
    ref={dd => (this.MyDropdown = dd)}
    placeholder="Please type something, dude"
    fluid
    search
    selection
    options={options}
    searchInput={{ autoFocus: true }}
  />

引用资料:

• Autofocus of dropdown search field #2108 - GitHub Issues