Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 搜索框输入上的Searchkit跟踪更改_Javascript_Reactjs_Search Box_Searchkit - Fatal编程技术网

Javascript 搜索框输入上的Searchkit跟踪更改

Javascript 搜索框输入上的Searchkit跟踪更改,javascript,reactjs,search-box,searchkit,Javascript,Reactjs,Search Box,Searchkit,我正在尝试跟踪库中某个组件的onChange事件。我想在输入字段下面做一些自动完成弹出窗口 我有一个Searchbar组件和一个SearchbarPopup组件。当我在搜索框输入中键入内容时,我希望在输入为空时显示或隐藏。但是现在我可以从console.log获得响应 export class Searchbar extends Component { constructor(props){ super(props) this.onChange = this.onChange

我正在尝试跟踪库中某个组件的onChange事件。我想在输入字段下面做一些自动完成弹出窗口

我有一个Searchbar组件和一个SearchbarPopup组件。当我在搜索框输入中键入内容时,我希望在输入为空时显示或隐藏。但是现在我可以从console.log获得响应

export class Searchbar extends Component {
  constructor(props){
    super(props)
    this.onChange = this.onChange.bind(this)
  }
  onChange(){
    console.log('input has changed!')
  }
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <div className="search">
            <div className="search_query">
              <SearchBox
                autofocus={true}
                searchOnChange={true}
                onChange={this.onChange}
                prefixQueryFields={[
                  "Author",
                  "Title"
                ]}
              />
            </div>
          </div>
        </Layout>
      </SearchkitProvider>
    );
  }
}
呈现HTML


在我的项目中,我还需要在SearchBox查询更改上设置一个侦听器。以下是我找到的可以得到回复的地方:

searchkit.setQueryProcessor((plainQueryObject) => {
  console.log('input has changed!')

  return plainQueryObject
})
链接到

searchkit.setQueryProcessor((plainQueryObject) => {
  console.log('input has changed!')

  return plainQueryObject
})