javascript - React 无法读取未定义的属性 'bind'

Question

我遇到了一个我不理解绑定(bind)的问题。我在 StackOverflow 中尝试了所有与此问题相关的问题的绑定(bind)方法，但每次我都有相同的问题

Error: "React Cannot read property 'bind' of undefined"

Error2:"TypeError: Cannot read property '__reactInternalInstance$b7iw1elmz95' of null at Object.getClosestInstanceFromNode"

因为我已经尝试了所有方法，所以我想知道这是否是外部问题绑定(bind)的真正问题。

我想做的是当我点击一个按钮时，会出现另一个内容。

这是我的代码:

import React, {Component} from 'react';

export default class Projects extends Component {
  constructor(){
    super();

    this.state = {
      onShow: false,
      opacity: 0,
      height: 0
   }
 }

  OnShow(){
    this.setState({
      onShow: !this.state.onShow,
      opacity: this.state.opacity === 0 ? 1:0,
      height: '100vh'
    });
  }

  render(){

    return(
      <div>
        <h2>blabla</h2><p>some extra blabla</p>
        <button onClick={this.onShow.bind(this)}>
          <div opacity={this.state.opacity}>YO</div>
        </button>
      </div>
    );
  }
}

Answer 1

onClick 按钮中有一个拼写错误:this.OnShow.bind(this) 是正确的方法。

函数名为OnShow，状态变量名为onShow