ReactJS - 當子狀態發生變化時更新父狀態

我對缺少工作代碼表示歉意，但我不確定如何去做這件事，因此它是非工作代碼。我希望在更改ToggleBox的狀態時更新App類中的this.state.count。我確信之前已經問過這個問題，提前感謝。ReactJS - 當子狀態發生變化時更新父狀態

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;

來源

2016-12-30 smykes

你只是在那裏渲染組件，你想用標記上的onClick事件來改變某個狀態？設置該道具並通過該功能。 – bntzio

你需要傳遞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設計如何使用的核心部分。通過以這種方式傳遞函數，您的子組件不必知道計數如何工作或如何遞增。這可以讓孩子更容易，但更重要的是，當你想改變計數的工作方式時，它更容易，因爲只有一個地方（父組件）控制它。

來源

2016-12-30 23:55:37 machineghost

完美，謝謝。有時我會過度揣測事物，忘記傳遞作爲道具的功能。 – smykes

如果我的狀態是從父組件大量切換的呢？我一直在嘗試使用componentDidUpdate來運行this.props.incrementCount（-1）;但山雀只運行一次，而不是每個切換框。 – smykes

如果我正確理解你，那麼狀態應該由父組件控制，並且它應該通過切換功能。如果我不是，我會建議開始一個新問題，以便提供更多細節（比將適合評論）。 – machineghost

ReactJS - 當子狀態發生變化時更新父狀態

回答

相關問題