Блог

Я изучаю контекстные крючки, и куда бы я ни пошел, я вижу, что данные передаются от родительских компонентов к дочерним, но мне нужно наоборот. Кроме того, есть несколько входных данных для компонентов на основе классов, но поскольку я понятия не имею о компонентах на основе классов, мне трудно это понять.

У меня есть выпадающий компонент, который имеет выпадающий компонент, импортируемый из react-bootstrap.

 const DropDown = (props) => {
const [selectedCountry,setSelectedCountry]=useState('World');
const [individualCountry,setIndividualCountry]=useState([]);
const onCountryClick=(event)=>{
    setSelectedCountry(event);
    //console.log(`country:  ${event}`)
    axios.get(`https://disease.sh/v3/covid-19/countries/${event}?strict=true`)
    .then(response=>{
  setIndividualCountry(response.data);

}).catch((error)=>{
  console.log(error);
})
}
return (
    <>
        <Dropdown onSelect={onCountryClick}>
            <Dropdown.Toggle variant="success" id="dropdown-basic">
                {selectedCountry}
                
            </Dropdown.Toggle>

            <Dropdown.Menu className="toOverflow">
            
            {
                props.countriesPassed.map((country)=>{
                    return(
                        <Dropdown.Item eventKey={country.country}>{country.country}</Dropdown.Item>
                    )
                    
                })
            }         
            </Dropdown.Menu>
        </Dropdown>


        <ContextIndividualCountry.Provider value={individualCountry}>
            
        </ContextIndividualCountry.Provider>

        {
            console.log(ContextIndividualCountry)
        }
    </>
)
}
 

То, что я здесь сделал, это передал api стран из родительского компонента в качестве реквизита здесь, чтобы отобразить и отобразить все страны с covid в раскрывающемся списке. Теперь то, что я хочу сделать, это передать данные выбранной страны из этого компонента в родительский компонент. Для этого я создал состояние и хочу передать это состояние individualCountry родительскому компоненту.

Я хочу добиться этого с помощью контекстных перехватов. Или это невозможно? Я думаю, что могу сделать это, передав функцию в качестве реквизита и вернув обновленное значение функции, но, как я уже сказал, мне было интересно, смогу ли я сделать это с помощью контекстных перехватов. Любая помощь будет оценена по достоинству, спасибо…..