Question

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

错误：＆＃34; React无法读取属性＆＃39; bind＆＃39;未定义＆＃34;

错误2：＆＃34; TypeError：无法读取属性＆＃39; __ reactInternalInstance $ b7iw1elmz95＆＃39;在Object.getClosestInstanceFromNode"
的null

因为我已经尝试过一切，我想知道这是否是一个外部问题绑定的真正问题。

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

这是我的代码：

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

点击按钮上有一个拼写错误： this.OnShow.bind(this)是正确的方法。

函数命名为OnShow，状态var命名为onShow

Answer 2

首先，您的函数名称调用中存在拼写错误。

但是，我建议不要手动绑定这个，而是让JS使用Arrow Function语法自动执行绑定：

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)

React无法读取属性＆＃39; bind＆＃39;未定义的

3 个答案: