リアクションセマンティックUI：ドロップダウン要素の入力フィールドにフォーカスを設定する方法

Question

最初にドロップダウン要素の入力フィールドにフォーカスを設定することはできますか？

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

だから、ユーザーがドロップダウン入力フィールドをクリックを必要とせずに検索する/入力を開始することができるはず...

Answer 1

あなたの質問が正しく分かっていれば、コンテンツが読み込まれたときにドロップダウンコンポーネントにフォーカスを当てたいのですか？

実際そうであれば、Refsを利用したいと思っています。特に Refs and the DOM

：

レフリーのためのいくつかの良いユースケースがあります。参考文献を使用するには：

• に詳細な例については、以下を参照してください。フォーカスの管理、テキスト選択、またはメディアの再生。
• 命令的なアニメーションをトリガする。
• サードパーティのDOMライブラリとの統合。

Answer 2

私はしかし、あなたの説明

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-inputを見つけました、この依存関係の最後のコミットは2年前だった。

react-dropdownがあります。これは、より有名で更新されているようです。それは私が、私はあなたの質問を理解し、私は私の答えを削除欠場思っ秒間

「反応し、ドロップダウン」 のconst defaultOption =オプションからインポート]ドロップダウン[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" 
/> 

前のものと似ています。それから、あなたの質問をもう一度読んで（2回）、私はこれがあなたが求めている答えだと思う。これがあなたの問題を解決するかどうか、親切に教えてください。