Reactjs 如何使用DataSearch作为Reactivesearch的受控组件？

我是ReactiveSearch库的新手，我使用autosuggestion实现了DataSearch组件作为我的站点内搜索栏。我添加了

value

和

onChange

以将输入值存储为状态，但一旦添加了

value

属性，我就无法再在搜索栏中键入内容。怎么了

我还想知道当我点击某个建议触发某个事件时，我可以使用什么样的回调函数，我尝试了

onClick

，但没有成功。这是我的代码，谢谢你的帮助

import * as React from 'react';
import {
  ReactiveBase,
  DataSearch,
} from '@appbaseio/reactivesearch';

import './SearchBar.scss';

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  handleInputChange = (event) => {
    this.setState({ searchTerm: event.target.value });
  };

  handleSearch = () => {
  // do something...
  };

  public render() {
    return (
      <React.Fragment>
        <ReactiveBase
          app="rooms,floors,assets"
          url="http://localhost:9200"
          headers={{
            'Access-Control-Allow-Origin': '*'
          }}
          style={{ display: 'inline' }}
        >
          <DataSearch
            componentId="SearchRoom"
            dataField={['roomName', 'roomNumber', 'floorName', 'assetName']}
            placeholder="Search for rooms or assets"
            style={{ width: 500, display: 'inline-block' }}
            fuzziness={1}
            value={this.state.searchTerm}
            onChange={this.handleInputChange}
            //how to trigger handleSearch when I click one of the suggestions?
          />
        </ReactiveBase>
      </React.Fragment>
    );
  }
}

import*as React from'React'；
进口{
反应基地，
数据研究，
}来自“@appbaseio/reactivesearch”；
导入“/SearchBar.scss”；
导出默认类搜索栏扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={searchTerm:''}；
}
handleInputChange=（事件）=>{
this.setState（{searchTerm:event.target.value}）；
};
handleSearch=（）=>{
//做点什么。。。
};
公共渲染（）{
返回(
);
}
}

onChange

返回更新后的值，但不返回

合成事件。我已经从文档中更新了DataSearch组件的演示，以使用受控行为

我还添加了一个回调，当您选择任何建议时，它将被调用。您可以使用
降档道具
实现此目的

检查应用程序。您还可以阅读更多有关此道具的信息

希望这有帮助
 @Deepak Grover你能看看我的密码吗？非常感谢。非常感谢您更新文档和应用程序示例！