如何在其父组件安装时具有语义 UI React Dropdown 自动对焦？

Question

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

我尝试在父项的 render() 中使用引用：

<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