我正在尝试将计算值从子组件传回父组件。子组件将使用多个用户输入来计算单个值，该值将传回父组件。
我已经编译了一个非常简化的版本如下。父组件不需要知道任何用户输入到子组件。但是，在我的应用程序中，我计划有一个动态列表的子组件和父组件将显示所有输出的总和从所有子组件。
父组件

export default function Parent() {
    //function that sums up all Child results
    const [value, setValue] = useState(1);
    const setValueFromChild = useCallback((e) => {
        var newValue = value + e;
        setValue(e)
    });

    //Included just 2 children (hard-coded) for clarity
    return (
        <div>
            <h1>Total: {value}</h1>
            <Child cbfunction={setValueFromChild} />
            <Child cbfunction={setValueFromChild} />
        </div>
    )
}

子组件：

const Child = (cbfunction) => {
    //Handles change in input from the selector tag
    const [sel, setSel] = useState(1);
    const onSelectChange = (e) => {
        setSel(e)
    }

    //Handles change in input from input field
    const [inp, setInp] = useState(1);
    const onInputChange = (e) => {
        setInp(e);

    }

    //Calculates the result. In reality this would be a complex function with if statements, etc.
    const calc = (s, i) => {
        var result = Number(sel) + Number(inp);
        cbfunction(result); //*****THIS IS WHERE I'M HAVING TROUBLE
        return (result);
    }

    return (
        <div>
        <select onChange={(e) => onSelectChange(e.target.value)} value={sel}>
            <option value={1}>1</option>
            <option value={2}>2</option>
            <option value={3}>3</option>
        </select>
        <input onChange={(e) => onInputChange(e.target.value)}  value={inp}>
        </input>
        <p>{calc(sel, inp)}</p>
        </div>
    )
}

我不知道当子组件的状态改变时如何调用Parent函数，我不想通过props将回调函数传递给子组件，但它似乎不像我调用它的方式那样工作。
请帮忙，先谢了!