react中是否可以将变量从子组件传递到父组件？

Question

我正在制作一个简单的食品订购网络应用程序，并试图将订购页面组织成单独的组件，但现在遇到了将变量传递到父页面的问题。我想收集 item.Price 和 item.specBurgerType 并传递给父级。这是可能的还是我应该重组我的代码？

这就是我的父组件：

const Order = () => {

    const [order, setOrder] = useState({
       specBurger: "",
       protein: "",
       bread: "",
       toppings: "",
       sides: "",
       drinks: "" 
    });

    function handleSpec(spec, price) {
        this.setOrder({specBurger: spec});
    }

    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>
    );
};```

Here is the child: 

const SpecialtyBurgers = () => {

const [specBurgers, setSpecBurgers] = useState([]);
useEffect( () => {
    axios.get('http://localhost:8800/specialtyburgers')
    .then(res => {
        setSpecBurgers(res.data);
    })
}, [])

const [burgerType, setBurgerType] = useState({
    burger: "",
    price: 0.0
})
const [price, setPrice] = useState();
const [specOrder, setSpecOrder] = useState([]);
function handleChange(p, e) {
    if(e.target.checked) {
        setSpecOrder(e.target.value);
        setPrice();
        //this.props.handleSpec(specOrder, price);
    }
    else if(!e.target.unchecked){
        setSpecOrder("");
        setPrice('0.0');
        //this.props.handleSpec(specOrder, price);
    }
}

var specBurgerDetails = "";
specBurgerDetails = specBurgers.map( (item, index) => {
    return(
        <div className="item">
            <h2 key={index}>{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.price, e)}/>
            <p>{specOrder}</p>
            <p>{price}</p>
        </div>
    )
});

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

};```

Answer 1

您可以实现从父级传递给子级的回调函数

const Order = () => {

  const getDataFromChild = (data) => { ... }

  return (
    <SpecialtyBurgers callback={getDataFromChild}/>
  )

}

const SpecialtyBurgers = ({callback}) => {
  return (
    <button onClick={() => callback(this.data)}>Click</button>
  )
}