如何从子组件更改父状态

Question

我是React的新手，我正在尝试构建一个Web应用程序，在其中动态显示从数据库中获取的目标（及其进度）。 我想在“编辑页面”中添加一个滑块功能，可以在其中使用MaterialUI滑块编辑其进度。 目标数组存储在“编辑页面”的状态中，我将这些目标作为道具传递给ObjectiveDisplay组件。该组件映射整个数组，并分别使用各自的滑块组件显示目标。如何通过滑块更改目标进度？ 每个目标对象都有一个唯一的ID，如果此信息有帮助，我会将其设置为滑块标签。

这是一种映射目标数组并将其与滑块一起呈现的方法。

const makeKeyObjectives = props.keyobjectives.map((keyobjective) => {
            return(
                <Card className={classes.secondarycard}>
                    <CardContent>
                        <Progress value={keyobjective.progress} total={keyobjective.goalnumber} progress="value" indicating size='small'>
                            {keyobjective.name}
                        </Progress>
                        <Typography id="discrete-sliderkey" gutterBottom>
                            Edit:
                        </Typography>
                        <Slider
                            defaultValue={keyobjective.progress}
                            aria-labelledby={keyobjective.keyid}
                            valueLabelDisplay="auto"
                            step={1}
                            marks
                            min={0}
                            max={keyobjective.goalnumber}
                            onChange={props.handleChange(keyobjective.progress)}
                        />
                    </CardContent>
                </Card>
            )
    })

我根本不知道这是否可行，并且对于是否应该更改代码结构，我持开放态度。预先非常感谢。