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

Question

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

错误："React 无法读取未定义的属性'绑定'"

错误

2："类型错误： 无法读取 null 在Object.getClosestInstanceFromNode"时的属性 '__reactInternalInstance$b7iw1elmz95'

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

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

这是我的代码：

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

onclickon button有拼写错误： this.OnShow.bind(this)是正确的方式。

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

Answer 2

首先，函数名称调用中有一个拼写错误。

而且，与其手动绑定它，我建议让 JS 通过使用箭头函数语法自动执行绑定：

OnShow = () => {
    // your code here
  }
render(){
    return(
      <div>
        <button onClick={this.OnShow}>
mybutton
        </button>
      </div>
    );
  }

它更优雅，节省您的时间。

Answer 3

这是一个

错别字错误：

原始功能是：

OnShow(){ ... }

所以，请更改：

从：

this.onShow.bind(this)

自：

this.OnShow.bind(this)