React中如何实现子函数组件向父函数组件传递数据？

问题原因&修复方案 #

你代码里存在3处问题导致状态无法同步：

• 子组件PreInputs错误使用useState：useState返回值是包含「状态值、更新函数」的数组，你没有解构直接把整个数组绑定到了input的value属性上，同时子组件维护了多余的本地状态，和父组件的全局状态完全脱节
• 父组件没有把最新的originalServings状态值传递给子组件，子组件无法作为受控组件同步父组件数据
• input获取到的输入值是字符串类型，没有做类型转换直接传递给父组件，后续做份数计算时可能出现类型异常
• form内的按钮默认是submit类型，点击会触发页面刷新，导致状态重置

第一步：修改App.js中PreInputs组件的调用 #

把父组件的originalServings值作为props传给子组件：

<PreInputs 
  originalServings={originalServings}
  changeNumIngredients={handleNumIngredients} 
  changeOriginalServings={handleOriginalServings} 
  changeNewServings={handleNewServings}
/>

第二步：修改PreInputs.js的逻辑 #

删掉子组件多余的本地状态，直接用父组件传入的值作为input的受控值，同时把输入值转成数字后再调用父组件的更新方法：

import React from 'react';

export const PreInputs = (props) => {
    const handleOriginalServingsChange = (e) => {
        // 把输入的字符串转成数字再传给父组件
        const originalServings = Number(e.target.value);
        props.changeOriginalServings(originalServings)
    }
    // 阻止表单默认提交行为，避免页面刷新
    const handleSubmit = (e) => {
        e.preventDefault();
    }
    
    return (
        <div className='pre-inputs'>
            <form onSubmit={handleSubmit}>
                <label>Original Servings: </label>
                {/* 直接用父组件传的originalServings作为value */}
                <input value={props.originalServings} onChange={handleOriginalServingsChange} type='number' />
                <button type="button">提交</button>
            </form>
            <h1>Placeholder</h1>
        </div>
    );
}

修改完成后修改输入框的值，父组件App中展示的originalServings就会同步更新了。

内容的提问来源于stack exchange，提问作者RaidingGames