Javascript 如何从子组件更新父状态？

我目前正在开发一个React应用程序（ES6），其中会列出许多食物

每次单击产品时，单个产品计数（子状态）应每次增加1，目前有效

然而，总热量计数（母体状态）也应使用母体食物状态的数据增加

示例：用户单击Brussel Sprouts项目。FoodItem计数将在每次单击时增加+1，但是我还要求应用程序类中的总卡路里计数（this.state.carriocount）在本例中每次单击时增加28.1

我是一个新的反应，所以在这方面的任何帮助将不胜感激

//FoodCards.js

const FoodCards = [
    {
        id: 0,
        name: 'Brussel Sprouts',
        quantity: '1/2 cup',
        calories: 28.1,
        betacarotene: 0.363,
        bilberry_fruit: 0,
        curcumin: 0,
        grapeseed: 0,
        green_tea: 0, 
        lutein: 1,
        lycopene: 0,
        vitamin_a: 0.03,
        vitamin_d: 0
    },
    ...
];
export default FoodCards

//App.js

import React from 'react';
import './tailwind.output.css';
import './App.scss';
import FoodCards from './data/foods';

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      foods: FoodCards,
      calorieCount: 0,
      vitaminACount: 0,
      vitaminDCount: 0,
    };
    this.increment = this.increment.bind(this);
  }

  increment(calories, vitaminA, vitaminD) {
    this.setState({
      calorieCount: Math.round(this.state.calorieCount + calories),
      vitaminACount: Math.round((this.state.vitaminACount + vitaminA) * 100) / 100,
      vitaminDCount: Math.round((this.state.vitaminDCount + vitaminD) * 100) / 100
    });
  };

  reset() {
    this.setState({
      calorieCount: 0,
      vitaminACount: 0,
      vitaminDCount: 0,
    });
  };

  render() {

    return (
      <div className="App">
        
        <header className="flex flex-wrap">
          <div className="calories-total">
            <span>Calories</span>
            <span className="num">{this.state.calorieCount}</span>
          </div>
  
          <div className="vitamin-a-total">
            <span>Vitamin A</span>
            <span className="num">{this.state.vitaminACount}</span>
          </div>
  
          <div className="vitamin-d-total">
            <span>Vitamin D</span>
            <span className="num">{this.state.vitaminDCount}</span>
          </div>
  
          <div className="export-btn flex items-center justify-center">
            Export Full Report
          </div>
  
        </header>
  
        <main className="products-grid flex flex-wrap">
  
        {this.state.foods.map((item, i) => {
          return <FoodItem key={item.id} name={ item.name } calories={item.calories} />
        })}
  
        </main>

        <footer>
          <div className="reset" onClick={() => this.reset()}>Reset</div>
        </footer>
  
      </div>
    );
  }
}

export default App;

class FoodItem extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      clickCount: 0
    };
  }

  handleClickIncrement() {
    this.setState({
      clickCount: this.state.clickCount + 1
    });
  };

  render() {
    return (
      <div className="product" onClick={() => this.handleClickIncrement()}>
        <p>{this.props.name} - {this.state.clickCount}</p>
        <p>Calories: {this.props.calories}</p>
      </div>
    );
  }
}

从“React”导入React；
导入“/tailwind.output.css”；
导入“/App.scss”；
从“/data/foods”导入食品卡；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
食品：食品卡，
卡路里数：0，
维生素含量：0，
数字：0，
};
this.increment=this.increment.bind（this）；
}
增量（卡路里、维生素A、维生素D）{
这是我的国家({
卡路里计数：Math.round（this.state.carriecount+carries），
维生素A计数：数学四舍五入（（this.state.vitaminACount+vitaminA）*100）/100，
vitaminDCount:Math.round（（this.state.vitaminDCount+vitaminD）*100）/100
});
};
重置（）{
这是我的国家({
卡路里数：0，
维生素含量：0，
数字：0，
});
};
render（）{
返回(
卡路里
{this.state.carriocount}
维生素A
{this.state.vitaminACount}
维生素D
{this.state.vitaminDCount}
导出完整报告
{this.state.foods.map（（项目，i）=>{
返回
})}
this.reset（）}>reset
);
}
}
导出默认应用程序；
类FoodItem扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
点击次数：0
};
}
handleClickIncrement（）{
这是我的国家({
clickCount:this.state.clickCount+1
});
};
render（）{
返回(
this.handleClickIncrement（）}>
{this.props.name}-{this.state.clickCount}

卡路里：{this.props.carries}

);
}
}

您的FoodItem需要一个可以通知家长的函数。所以在应用程序中，你可以给它这样的东西：

  <FoodItem
    updateParent={this.updateFromItem.bind(this)}
    // other props
  />

updateFromItem

函数位于父组件中，通过

bind（this）

它的作用域是它，但是您从子组件（FoodItem）传播更改并从那里调用它：

  handleClickIncrement() {
    this.props.updateParent(this.props.calories);
    // ...
  }

---

您的FoodItem需要一个可以通知父级的函数。所以在应用程序中，你可以给它这样的东西：

  <FoodItem
    updateParent={this.updateFromItem.bind(this)}
    // other props
  />

updateFromItem

函数位于父组件中，通过

bind（this）

它的作用域是它，但是您从子组件（FoodItem）传播更改并从那里调用它：

  handleClickIncrement() {
    this.props.updateParent(this.props.calories);
    // ...
  }