Если есть 2 файла с именами Home.js и search.js. Дом - это родительский компонент. Итак, я хочу отправлять данные от ребенка к родителю с помощью панели поиска в search.js. После отправки поискового запроса, как передать данные в домашний компонент.

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>
         );
    }

Как я могу это сделать?

0
pr96 11 Фев 2021 в 17:24

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>
     );
}
0
Kubilay Şimşek 11 Фев 2021 в 14:37