如何在反应中使用道具进行/访问状态？

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