ReactJS - 子の状態が変更されたときに親の状態を更新する

Question

私は働くコードがないことをお詫びしますが、これを行う方法についてはわかりません。私はToggleBoxの状態が変更されたときに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} 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; 

Answer 1

あなたはToggleBoxに、カウントを更新機能を渡す必要があります。例えば

：

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

このパターンは、しばしば「フラックス」と呼ばれている（または、より正確にするために、これはFluxパターン全体の一部です）、それはReactがどのように使われるように設計されたかの中心的な部分です。このように関数を渡すことで、子コンポーネントは、countの仕組みや増分の仕方について何も知る必要はありません。これは子供にとって簡単なことですが、もっと重要なのは、カウントの仕組みを変更したいときには、それを制御する場所（親コンポーネント）が1つしかないので、もっと簡単になります。