React中子组件能否向父组件传递变量？附点餐场景代码

你要的子组件向父组件传递item.Price和item.SpecBurgerType完全可以通过props传递回调函数实现，不需要重构代码，只要修正现有代码里的几个问题就行：

父组件修正点 #

1. 函数组件里不能用this，直接调用setOrder即可
2. 更新状态时要合并原有状态，避免覆盖protein、bread等其他字段

修正后的父组件代码：

const Order = () => {
    const [order, setOrder] = useState({
       specBurger: "",
       protein: "",
       bread: "",
       toppings: "",
       sides: "",
       drinks: "",
       specBurgerPrice: 0.0 // 新增字段存储选中汉堡的价格
    });

    function handleSpec(spec, price) {
        // 合并原有状态，只更新需要的字段
        setOrder(prev => ({
            ...prev,
            specBurger: spec,
            specBurgerPrice: price
        }));
    }

    return(
        <div className="order">
            <h1 className="title">Welcome to D & S Burgers</h1>
            <Link to="./pages/Login"><button className="loginButton">Manager Login</button></Link>
            <h2>Please choose your items and place your order!</h2>

            <div className="orderSection">
                <SpecialtyBurgers onSpecSelect={handleSpec}/>
                <Custom/>
                <Sides />
                <Drinks />
                <div><Link to="/pages/Confirmation"><button className="orderButton">Order</button></Link></div>
            </div>
        </div>
    );
};

子组件修正点 #

1. 必须接收父组件传递的onSpecSelect回调props
2. 直接使用当前选中的item数据传递给父组件，不用依赖子组件内部状态（状态更新是异步的，刚set完拿不到最新值）
3. 修正checkbox的取消选中逻辑，传递空值和0价格

修正后的子组件代码：

const SpecialtyBurgers = ({ onSpecSelect }) => { // 接收父组件的回调函数
    const [specBurgers, setSpecBurgers] = useState([]);
    useEffect( () => {
        axios.get('http://localhost:8800/specialtyburgers')
        .then(res => {
            setSpecBurgers(res.data);
        })
    }, [])

    function handleChange(item, e) {
        if(e.target.checked) {
            // 直接把当前item的类型和价格传给父组件
            onSpecSelect(item.SpecBurgerType, item.Price);
        } else {
            // 取消选中时传递空值和0价格
            onSpecSelect("", 0.0);
        }
    }

    const specBurgerDetails = specBurgers.map( (item, index) => {
        return(
            <div className="item" key={index}> {/* key要放在循环的最外层元素上 */}
                <h2>{item.SpecBurgerType}</h2>
                <p>{item.Protein}</p>
                <p>{item.Toppings}</p>
                <p>{item.Price}</p>
                <input 
                    type='checkbox' 
                    value={item.SpecBurgerType} 
                    onChange={(e) => handleChange(item, e)} // 把当前item对象传入处理函数
                />
            </div>
        )
    });

    return(
        <div className="orderSection">
                <h1 className="menuTitle">Specialty Burgers</h1>
                <div className="menuItems">
                    {specBurgerDetails}
                </div>
        </div>
    );
};

核心逻辑说明 #

1. 父组件定义状态更新函数handleSpec，并通过onSpecSelect props传递给子组件
2. 子组件触发选择事件时，直接调用这个回调函数，把需要的item.SpecBurgerType和item.Price作为参数传入
3. 父组件收到参数后，更新自身的order状态，完成子到父的数据传递

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