Question

我试图在另一个组件中更改我的状态。我通过道具

通过了州

  constructor(props) {
    super(props);

      this.handleClick = this.handleClick.bind(this);  

      this.state = {
          isOpen: false
      };  
  } 

<MobileContent isOpen={this.state.isOpen} />

在我的MobileContent组件中，我想在单击元素时更改状态。

class MobileContent extends Component {

  render() {
    if (this.props.isOpen) {
        return (
            <Grid fluid>
                <div className="mobileContent">
                <Row center="xs">
                    <Col xs={12}>
                    <span className="button">Hello, world!</span>
                    <span className="close" onClick={this.handleClick} >X</span>              
                    </Col>                 
                </Row>
                </div>
            </Grid>
        );
    }
    return null;
  }
}

export default MobileContent;

感谢您的帮助!!

Answer 1

如果您希望Child组件通知父组件，那么您应该将另一个支柱传递给作为函数的子组件。然后孩子可以打电话给那个。所以在父母：

constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);  

    this.state = {
        isOpen: false
    };  
} 

<MobileContent isOpen={this.state.isOpen} onClose={this.handleClick}/>

在孩子身上：

render() {
    if (this.props.isOpen) {
        return (
            <Grid fluid>
                <div className="mobileContent">
                <Row center="xs">
                    <Col xs={12}>
                    <span className="button">Hello, world!</span>
                    <span className="close" onClick={this.props.onClose}>X</span>              
                    </Col>                 
                </Row>
                </div>
            </Grid>
        );
    }
    return null;
  }

React - 更改子组件中的状态

1 个答案: