У меня есть дочерний компонент, который в основном состоит из четырех флажков со значениями от 1 до 4, так что вот моя проблема: каждый раз, когда пользователь нажимает на один из них, он должен передать значение моему api, и он будет возвращать основанный на элементе с этим значением проблема, с которой я сталкиваюсь, заключается в том, что я не знаю, как передать эти значения родительскому элементу, и я хочу, чтобы родительский компонент обновлялся каждый раз, когда пользователь нажимает на один из флажков, метод componentDidUpdate отлично работает в дочернем компоненте, но это не влияет на родительский компонент, и вот что я делаю в дочернем компоненте:
class PriceRange extends React.Component {
state = {
checked5: false,
checked6: false,
checked7: false,
checked8: false,
checked9: false,
FilterPrice: ''
}
componentDidUpdate() {
localStorage.setItem("FilterPrice", this.state.FilterPrice)
console.log(localStorage.getItem("FilterPrice"))
}
render() {
const clearFilters = () => {
this.setState({
checked5: false,
checked6: false,
checked7: false,
checked8: false,
checked9: false,
FilterPrice : null
});
}
return (
<div className="day-range price-range col-xl-12 col-lg-12 col-md-12 col-sm-6 col-12 ">
<div className="title">
<div className="range">
<span>محدوده قیمت</span>
</div>
<div className="clear" onClick={clearFilters}>
<div className="icon">
<i className="fa fa-times" aria-hidden="true"></i>
</div>
<span> حذف فیلترها</span>
</div>
</div>
<div className="form-group">
<Checkbox
nativeControlId='5'
checked={this.state.checked5}
onChange={(e) => {
this.setState({
checked5: e.target.checked,
checked6: false,
checked7: false,
checked8: false,
checked9: false,
FilterPrice: 5
})
}
}
onClick={this.props.action}
/>
<label htmlFor='5'>کمتر از 100,000 تومان</label>
</div>
<div className="form-group">
<Checkbox
nativeControlId='6'
checked={this.state.checked6}
onChange={(e) => {
this.setState({
checked6: e.target.checked,
checked5: false,
checked7: false,
checked8: false,
checked9: false,
FilterPrice: 6
})
}
}
onClick={this.props.action}
/>
<label htmlFor='6'>از 100,000 تومان تا 200,000 تومان</label>
</div>
<div className="form-group">
<Checkbox
nativeControlId='7'
checked={this.state.checked7}
onChange={(e) => {
this.setState({
checked7: e.target.checked,
checked6: false,
checked5: false,
checked8: false,
checked9: false,
FilterPrice: 7
})
}
}
onClick={this.props.action}
/>
<label htmlFor='7'>از 200,000 تومان تا 400,000 تومان</label>
</div>
<div className="form-group">
<Checkbox
nativeControlId='8'
checked={this.state.checked8}
onChange={(e) => {
this.setState({
checked8: e.target.checked,
checked6: false,
checked7: false,
checked5: false,
checked9: false,
FilterPrice: 8
})
}
}
onClick={this.props.action}
/>
<label htmlFor='8'>از 400,000 تومان تا 600,000 تومان</label>
</div>
<div className="form-group">
<Checkbox
nativeControlId='9'
checked={this.state.checked9}
onChange={(e) => {
this.setState({
checked9: e.target.checked,
checked6: false,
checked7: false,
checked8: false,
checked5: false,
FilterPrice: 9
})
}
}
onClick={this.props.action}
/>
<label htmlFor='9'>بیشتر از 600,000 تومان</label>
</div>
</div>
)
}
}
export default PriceRange;
и то, что я использую для родительского компонента, выглядит примерно так:
state = {
priceRange:localStorage.getItem("FilterPrice")
}
componentDidUpdate(){
if(this.state.priceRange==localStorage.getItem("FilterPrice")){
console.log("same")
}else{
this.setState({priceRange:localStorage.getItem("FilterPrice")})
console.log(this.state.priceRange)
}
}
поэтому у меня есть два вопроса: как передать эти значения без использования localstorage и как я могу обновить родительский компонент всякий раз, когда пользователь нажимает один из флажков?