反应调用组件的功能，但功能丧失这个[复制]的定义

Question

这个问题已经在这里有一个答案：

• How to access the correct `this` inside a callback? 10个回答
• Unable to access React instance (this) inside event handler 18个回答

我有这样的代码，由于某种原因，当拨动被调用控制台提供未定义“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);
}