Javascript ReactJS-更改子状态时更新父状态

我为缺少工作代码而道歉，但我不知道如何去做，所以它是非工作代码。当切换框的状态改变时，我希望更新App类中的this.state.count。我相信这之前有人问过，提前谢谢

import React, { Component } from 'react';
import ToggleBox from '../components/ToggleBox';
class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
      total : 60,
      count: 0
    };
  }
  getToggles() {
      let toggles = [];
      for (let i = 0; i < this.state.count; i++) {
        toggles.push(<ToggleBox checked={false} key={i} />);
      }
    return toggles;
  }

  render() {
    let toggles = this.getToggles();
    return (
      <div className="App">
        {{this.state.count}} - {{this.state.total}}
        <div className="container-toggle-box">
            {toggles}
        </div>
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“../components/ToggleBox”导入ToggleBox；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
总数：60，
计数：0
};
}
getToggles（）{
让切换=[]；
for（设i=0；i

…以及组件：

import React, {Component} from 'react';
class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active = this.props.checked
    };
    this.handleClick= this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({active: (this.state.active) ? false : true}
  }
  render() {
    let mark = (this.state.active) ? 'x' : 'o'
      return (
        <span>
          {mark}
        </span>
      );
  }
}

export default ToggleBox;

handleClick() {
    this.setState({active: (this.state.active) ? false : true};
    this.props.incrementCount();
}

import React，{Component}来自'React'；
类ToggleBox扩展组件{
建造师（道具）{
超级（道具）；
此.state={
活动=此.props.checked
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（）{
this.setState（{active:（this.state.active）？false:true}
}
render（）{
让mark=（this.state.active）？'x'：'o'
返回(
{mark}
);
}
}
导出默认切换框；

您需要传递一个更新计数的函数

例如：

toggles.push(<ToggleBox
    checked={false} 
    key={i}
    incrementCount={() => this.setState({count: this.state.count + 1})}
/>);

---

这种模式通常被称为“通量”（或者更准确地说，它是整个通量模式的一部分），这是React设计使用方式的核心部分。通过以这种方式传递函数，您的子组件不必知道计数是如何工作的或它是如何递增的。这使子组件的工作变得简单，但更重要的是，当您想要更改计数的工作方式时，它会使更改变得更加容易，因为只有单个位置（父零部件）它控制着它。

你只是在那里渲染组件，你想用标记上的onClick事件来改变一些状态吗？设置该属性并传入函数。太好了，谢谢。有时候我想得太多了，忘记了将函数作为属性传入。如果我的状态是可以从父组件批量切换的呢？我一直都是正在尝试使用componentDidUpdate运行此.props.incrementCount（-1）；但它只运行一次，而不是针对每个切换框。如果我理解正确，则状态应由父组件控制，并应传入切换函数。如果我没有理解，我建议启动一个新问题，以便您可以提供更多详细信息（这将适合于评论）。我创建了一个新的线程，并给出了一个我的问题的工作示例。我本来应该这样做的，但我感到内疚，在一天内发布了两个问题。