Find input search text

0

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ả

Tags

Post a Comment

0Comments
Post a Comment (0)