Question

我有这段代码，由于某种原因，当切换被调用时，console会给'this.state'定义未定义。不太确定发生了什么事。

// Toggles the modal to open or close depending on current state
  toggle() {
    console.log(this.state);
    this.setState({
      showModal: !this.state.showModal
    });
  };

向下渲染

<Modal isOpen={this.state.showModal} toggle={this.toggle}>
  <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
  <ModalBody>
    Lorem ipsum dolor sit amet
  </ModalBody>
  <ModalFooter>
    <Button color="primary" onClick={this.toggle}>Save</Button>
    <Button color="secondary" onClick={this.toggle}>Cancel</Button>
  </ModalFooter>
</Modal>

Answer 1

这是因为，这是指被调用者的作用域，因此并不像您期望的那样指代状态。将方法绑定到构造函数中，或使用箭头函数。

toggle = () => {
  console.log(this.state);
  this.setState({
    showModal: !this.state.showModal
  });
};

Answer 2

这是因为toggle()拥有自己的this，因此没有state，您可以使用以下箭头功能：

toggle = () => {
    console.log(this.state);
    this.setState({
      showModal: !this.state.showModal
    });
  };

或将其绑定到构造函数中

constructor(props){
  super(props);
  this.toggle = this.toggle.bind(this);
}

反应调用组件中的函数，但函数对此失去定义

2 个答案: