如何在反應中使用道具進行/訪問狀態？

Question

我做了一個應用程序與多個組件，並希望他們的狀態被訪問使用父/主應用程序，我不知道如何得到它。我想要做的是當我改變主要「應用程序」狀態應該改變組件狀態。其中一個組件是「複選框」，現在我想用父應用程序訪問它的狀態，我做了多次嘗試但沒有完成。我的代碼是這樣的..

這主要是「應用」代碼：

import React, { Component } from 'react'; 
import Checkbox from './checkbox'; 
import Radio from './Radio'; 
import ToggleSwitch from './ToggleSwitch'; 
import PrimaryButton from './PrimaryButton'; 

class App extends Component { 
    onClick(isClicked){ 
    isChecked:true 
    }; 

    render() { 
    return (
     <div id="form"> 
     <Checkbox 
      onClick={this.onClick} 
     /> 
     <RadioButton 
      onClick={this.onClick} 
     /> 
     </div> 

    ); 
    } 
} 

export default App; 

我想訪問該組件是這樣的：

import React, { Component } from 'react'; 
class Checkbox extends Component { 

    constructor(props){ 
    super(props); 
    this.state={ 
     isChecked:true 
    }; 
    }; 

    onCheck(){ 
    this.setState({ 
     isChecked: !this.state.isChecked 
    }); 

    this.props.isClicked() 
    }; 

    render() { 
    return (
     <div> 
     <div 
      className={this.state.isChecked ? 'checked': 'unchecked'} 
      onClick={this.onCheck.bind(this)} 
     > 
     </div> 
     </div> 
    ); 
    } 
} 

export default Checkbox; 

Answer 1

你忘了onClick事件綁定在應用程序組件，試試這個它會工作：

class App extends Component {  
    onClick(isClicked){ 
     console.log('isClicked', isClicked); 
    }; 

    render() { 
     return (
     <div id="form"> 
      <Checkbox onClick={this.onClick.bind(this)}/> 
     </div> 
    ); 
    } 
} 

Answer 2

如果您已經有onClick處理複選框我不明白爲什麼你不能將state移動到App組件，只需將回調從那裏傳遞到Checkbox即可更新父狀態。這對我來說似乎是一種更好的反應方式。

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state={ 
     isChecked:true 
    } 
    } 
    onClick = (isClicked) => { 
    this.setState({isChecked: !this.state.isChecked}) 
    } 

    render() { 
    return (
     <div id="form"> 
     <Checkbox 
      onClick={this.onClick} 
      ischecked={this.state.isChecked} 
     /> 
     </div> 

    ); 
    } 
} 

組件

class Checkbox extends Component { 

    onCheck(){ 
    this.props.onClick() 
    } 

    render() { 
    return (
     <div> 
     <div 
      className={this.props.isChecked ? 'checked': 'unchecked'} 
      onClick={this.onCheck.bind(this)} 
     > 
     </div> 
     </div> 
    ) 
    } 
}