使用 Hooks 响应通过父级向子级传递数据

Question

If there is 2 files called Home.js and search.js files. Home is the parent component. So i want to send data from child to parent with a search bar in search.js. After submit the Search btn how to pass the data to the home component.

Home.js

    const Home = () => {
        
        const [data, setData] = useState();
       
        return ( 
            <div className="home">
                <search ></search>
            </div>
         );
    }

search.js

    const Search = () => {
        
        return ( 
            <div className="search">
                <input type="text" />
                <button>Search</button>
            </div>
         );
    }

How can i do it?

Answer 1

Home.js

const Home = () => {
    
    const [data, setData] = useState();
    const searchClickHandler = (text) => {
    // you can use search bar text from child component
    }
    return ( 
        <div className="home">
            <search clickFromChild={(text) => searchClickHandler(text)} ></search>
        </div>
     );
}

Search.js

const Search = (props) => {
const [text,setText] = React.useState("")
    
    return ( 
        <div className="search">
            <input onChange={(e) => setText(e.target.value)} type="text" />
            <button onClick={() => props.clickFromChild(text)} >Search</button>
        </div>
     );
}