Question

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

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

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

Answer 1

如果我正确理解了您的问题，您希望在加载内容后重点关注Dropdown组件吗？

如果情况确实如此，那么您想要使用Refs。有关详细示例，请参阅以下内容： Refs and the 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似乎更有名并且更新到最新。它的工作原理类似于前一个

从＆＃39; react-dropdown＆＃39;导入下拉列表 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"
/>

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

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

2 个答案: