Как программно сфокусировать компонент поиска в Semantic UI React?

Поскольку вопрос говорит сам за себя, я не могу сфокусировать компонент Semantic UI Search программно.

Я старался:

<Search
     category
     fluid
     loading={isItemLoading}
     onResultSelect={this.handleItemResultSelect}
     onSearchChange={this.handleItemSearchChange}
     placeholder='Search by name'
     results={itemResults}
     value={itemValue}
     ref={input => { this.itemSearch = input; }} />

а также

this.itemSearch.setState({ focus: true, open: true });

Это открывает результаты, но не фокусирует ввод для повторного ввода пользователем.


reactjs semantic-ui-react semantic-ui
person Yehan Pemarathne    schedule 26.10.2017    source источник
comment
Вы пытались вызвать метод .focus() для ссылки this.itemSearch? Если это не сработает, вы всегда можете использовать простой JS document. querySelector и вызвать метод focus (не самое чистое решение, но должно работать)   -  person Grandas    schedule 27.10.2017
comment
В компоненте Search нет .focus(). Это, вероятно, связано с input внутри компонента Search, но я не могу найти способ добраться до этого.   -  person Yehan Pemarathne    schedule 27.10.2017

Ответы (5)


arrow_upward
1
arrow_downward

Это не очень красиво, но это сработает. Не говори никому, что я это предложил.

<Search id="xyz" />
<Button onClick={() => document.getElementById('xyz').focus()}>Focus</Button>
person user2962393    schedule 28.10.2017
comment
Спасибо @ user2962393, это работает. - person Yehan Pemarathne; 29.10.2017

arrow_upward
4
arrow_downward

Для тех, кто натыкается на этот старый вопрос: поиск теперь имеет входную поддержку. Похоже, он принимает те же реквизиты, что и компонент семантического ввода. Получите входную ссылку поиска следующим образом:

<Search input={{ref: r => this.searchInputRef = r}} />

А затем используйте его следующим образом:

focusSearchInput() {
  if (this.searchInputRef.focus) {
    this.searchInputRef.focus();
  }
}

Меня устраивает

person dletin    schedule 12.05.2018

arrow_upward
3
arrow_downward

Это сработало для меня

import React, { useEffect } from 'react'
import { Search} from 'semantic-ui-react'

const Form = (props) => {
   const searchRef = React.createRef();

   useEffect(() => {
      searchRef.current.focus();
   }, [])

   return (
      <div>
         <Search input={{ref: searchRef}} />
      </div>
   )
}

export default Form
person Julio Ojeda    schedule 31.12.2019
comment
У меня тоже отлично сработало. Спасибо. Для Typescript мне нужно было только добавить тип в createRef (React.createRef‹HTMLDivElement›()) и проверить значение null current. - person voodoogiant; 26.11.2020

arrow_upward
0
arrow_downward

Если вы создаете собственную оболочку вокруг компонента поиска, вы также можете использовать ReactDOM.findDOMNode и некоторый jquery, чтобы избежать проблемы с использованием идентификаторов.

import React from 'react'
import { Search } from 'semantic-ui-react'

class SuperSearch extends React.Component {

    componentDidMount() {
        var search_bar = ReactDOM.findDOMNode(this)
        $(search_bar).find('input').get(0).focus()
    }

    render () {
        return (
            <Search></Search>
        )
    }
}
person Roman Scher    schedule 21.02.2018

arrow_upward
0
arrow_downward

Каким-то образом вызывается componentDidMount до получения «ref»....

Вот решение:

    <Search
      input={{ref: r => {
        if (r && r.inputRef) {
          r.inputRef.focus()
        }
      }}}

Это добавит фокус, когда поиск отображается в React.

person Thomas Kristiansen    schedule 04.07.2018
comment
На самом деле это будет: r.inputRef.current.focus() - person Decimoseptimo; 30.08.2019