如何在 Semantic UI React 中以编程方式聚焦搜索组件？

Question

如问题所述，我无法以编程方式聚焦语义 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 });

这会打开结果，但不会集中输入以供用户重新键入。

Answer 1

这不是很漂亮，但可以解决问题。不要告诉任何人这是我提议的。

<Search id="xyz" />
<Button onClick={() => document.getElementById('xyz').focus()}>Focus</Button>

Answer 2

如果您围绕搜索组件创建自己的包装器，您还可以使用 ReactDOM.findDOMNode 和一些 jquery 来避免 issues with using ids。

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>
        )
    }
}

Answer 3

对于那些偶然发现这个老问题的人：搜索现在有输入属性。看起来它接受与语义输入组件相同的道具。像这样获取搜索的输入参考：

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

然后像这样使用它：

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

对我有用

Answer 4

一些如何在获取 "ref" 之前调用 componentDidMount....

解决方法如下：

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

这将在 React 中显示搜索时添加焦点..

Answer 5

这对我有用

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

如何在 Semantic UI React 中以编程方式聚焦搜索组件？

How can I focus a Search component programmatically in Semantic UI React?

reactjs

semantic-ui

semantic-ui-react