Question

我创建了一个包含多个组件的应用程序，并希望使用父/主应用程序访问其状态，我不知道如何获取它。我想要做的是当我在主“App”中改变状态时，组件状态应该改变。其中一个组件是'复选框'，现在我想使用父应用程序访问其状态，我做了多次尝试但没有完成它。我的代码是这样的..

这是主'应用'代码：

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事件，尝试此操作将起作用：

glEnable(0x8861)

Answer 2

如果您已经拥有Checkbox的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>
    )
  }
}

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

2 个答案: