App.js
import Data from "./data"; class App extends Component { constructor(props) { super(props); // set gia tri state hienthifrom:false this.state={ data:Data, strfind:'' } } getTextSearch =(v)=>{ this.setState({strfind:v}); } render() { var kq =[]; this.state.data.forEach((v)=>{ if(v.name.indexOf(this.state.strfind) !== -1){ kq.push(v); } }) return ( <div className="container"> <Search ChildtoParent={(v)=>this.getTextSearch(v)}/> </div> ); } } export default App;
Search.js
class Search extends Component { constructor(props) { super(props); this.state={ trungian:'' } } isChange=(e)=>{ console.log(e.target.value); this.setState({trungian:e.target.value}); this.props.ChildtoParent(e.target.value); } submitBt=()=>{ return this.state.trungian; } render() { return ( <div> <div className="btn-group"> <input style={{width:"765px"}} onChange={(e)=>this.isChange(e)} type="text" className="form-control" placeholder="Nhập từ khóa" /> <button onClick={()=>this.props.ChildtoParent(this.submitBt())} className="btn btn-secondary" type="button"> <i className="fa fa-search" /> </button> <hr/> </div> </div> ); } }
Kết quả |