Question

我为缺乏正常工作的代码道歉，但我不知道如何去做，所以非工作代码就是这样。我想在更改ToggleBox的状态时更新App类中的this.state.count。我确信之前已经提出过，先谢谢。

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;

......和组件：

{{1}}

Answer 1

您需要传递toggles.push(<ToggleBox checked={false} key={i} incrementCount={() => this.setState({count: this.state.count + 1})} />);更新计数的函数。

例如：

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

然后，您只需在子组件中调用该方法：

$result = array();
foreach ($arr as $i => $text1) {
    $keep = true;
    for ($j = $i + 1; $j < count($arr); $j++) {
        $text2 = $arr[$j];
        similar_text($text1, $text2, $percent);
        if ($percent > 90) {
            $keep = false;
            break;
        }
    }
    if ($keep) {
        $result[] = $text1;
    }
}

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

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

1 个答案: