React语义UI：如何为下拉元素的输入字段设置焦点

Question

是否可以将焦点初始设置为Dropdown元素的输入字段？

<Dropdown
  name={name}
  placeholder='Select type'
  search
  searchInput={{ type: 'text' }}
  selection
  onChange={this.handleChange}
  options={options}
/>

因此，用户应该能够开始键入/搜索而无需单击下拉输入字段...

Answer 1

如果我正确理解您的问题，您希望在加载内容时将Dropdown组件放在焦点上吗？

如果确实如此，那么你想要使用Refs。 有关详细示例，请参阅以下内容： Refs和DOM

特别是：

何时使用参考

refs有一些很好的用例：

• 管理焦点 ，文本选择或媒体播放。
• 触发势在必行的动画。
• 与第三方DOM库集成。

Answer 2

我发现react-dropdown-input符合你的描述

var searchNames = ['Sydney', 'Melbourne', 'Brisbane', 
    'Adelaide', 'Perth', 'Hobart'];
//...
<DropdownInput 
    options={searchNames}
    defaultValue={this.props.initialValue} // This is what you need
    menuClassName='dropdown-input'
    onSelect={this.handleSelectName}
    placeholder='Search...'
/>

然而，这种依赖的最后一次提交是两年前。

反应下拉似乎更有名，并且更新到目前为止。 它的工作原理类似于前一个

从'react-dropdown'中导入下拉列表const defaultOption = options [0]

import Dropdown from 'react-dropdown'
const defaultOption = options[0]
<Dropdown 
    options={options}
    onChange={this._onSelect}
    value={defaultOption} // This is what you need
    placeholder="Select an option"
/>

有一秒钟，我以为我错过了解你的问题，我删除了我的答案。 然后我再次阅读你的问题（两次），我认为这是你正在寻找的答案。 如果这可以解决您的问题，请告诉我。