React中子组件更新时如何更新父组件

Question

我有一个子组件，它基本上是四个复选框，值从 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 的情况下传递这些值，以及如何在用户单击其中一个复选框时更新父组件？

Answer 1

在父级中定义一个函数。例如：

const getCheckboxValue =(checkboxVlueFromChild)=>{
    //call your api or do some stuff in parent.
}

将此函数传递给您的子组件。例如：

<Checkbox ... getCheckboxValue={getCheckboxValue} />

在子项中，更改复选框调用 getCheckboxValue 函数并将值作为参数传递。例如，g

const handleCheckboxChange = (e) => {
   props.getCheckboxValue(e.target.value);
}