I need to create a menu in Reactjs and call an API using redux to display the data. Now I want to create a search box in the menu to display a particular category. I have tried using refs but it doesn't work. And I guess it is deprecated.
class App extends Component {
constructor(props){
super(props);
this.state = { datas: []}//props.menu_items
}
componentWillMount() {
this.setState({
datas : require('./sample2')
});
}
render() {
return (
<div className="App">
<h2>Menu Dashboard</h2>
<Buttons />
<div style={{ border:'1px solid
#E7E7E7',marginTop:'3%',width:'90%',marginLeft:'5%'}}>
<Filters />
<DisplayTable datas={this.state.datas}/>
</div>
</div>
)
}
}
class Buttons extends Component {
constructor(props){
super(props);
// this.state = {searchInput: ''};
this.search = this.search.bind(this);
}
search(event){
if (event.keyCode === 13) {
// this.setState({searchInput: event.target.value});
console.log(this.refs.searchInput.value);
event.preventDefault();
}
}
render() {
return (
<div>
<button className="button1">Categories</button>
<button className="button2">Add Ons</button>
<FormControl type="text" placeholder="search items" ref="searchInput"
className="search " onKeyDown={this.search} />
</div>
)
}
}
How should I access the value entered in the search box so that I can display the data according to it? Also, I want to call the search function by pressing enter. I have tried the above code for both. Thanks in advance.