[英]How to use DataSearch as controlled component from Reactivesearch?
I'm new to ReactiveSearch library, and I implemented the DataSearch component with autosuggestion as my in-site SearchBar.我是 ReactiveSearch 库的新手,我实现了带有自动建议的 DataSearch 组件作为我的站点内搜索栏。 I added
value
and onChange
to in order to store the input value as a state, but as soon as I added the value
prop, I can't type in the search bar any more.我添加了
value
和onChange
以将输入值存储为状态,但是一旦我添加了value
属性,我就无法再在搜索栏中输入。 What's wrong?怎么了?
I also want to know what kind of callback function can I use when I click one of the suggestions to trigger some event, I tried onClick
, but it didn't work.我还想知道当我单击其中一个建议来触发某个事件时可以使用什么样的回调函数,我尝试了
onClick
,但没有奏效。 Here is my code, any help is appreciated!这是我的代码,任何帮助表示赞赏!
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>
);
}
}
onChange
returns the updated value it does not return a Synthetic Event
. onChange
返回更新后的值,它不返回Synthetic Event
。 I have updated the Demo of DataSearch component from the docs to use controlled behavior.我已更新文档中的 DataSearch 组件演示以使用受控行为。
I have also added a callback which would get called when you select any suggestion.我还添加了一个回调,当您选择任何建议时会调用该回调。 You can make use of
downShiftProps
to achieve this.您可以使用
downShiftProps
来实现这一点。
Check the app here .在此处检查应用程序。 You can also read more about this props here .
您还可以在此处阅读有关此道具的更多信息。
Hope this helps!希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.