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中？

5 个答案: