我有一个子组件，基本上是四个复选框，其值从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的情况下传递这些值，以及每当用户单击复选框之一时如何更新父组件？
在父级中定义一个函数。例如：
const getCheckboxValue =(checkboxVlueFromChild)=>{
//call your api or do some stuff in parent.
}