react无法读取未定义的属性“绑定”

IT技术 javascript reactjs data-binding bind
2021-05-08 09:00:21

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

错误：“React 无法读取未定义的属性‘绑定’”

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

因为我什么都试过了，我想知道这是否是外部问题绑定的真正问题。

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

这是我的代码：

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>
    );
  }
}
3个回答

onClick on button 中有一个错字： this.OnShow.bind(this)是正确的方法。

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

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

而且，我建议使用箭头函数语法让 JS 自动进行绑定，而不是手动绑定this：

OnShow = () => {
    // your code here
  }

render(){

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

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

这是一个错字错误：

原来的功能是：

OnShow(){ ... }

所以，请改变：

从 ：

this.onShow.bind(this)

到 ：

this.OnShow.bind(this)
其它你可能感兴趣的问题
上一篇将 redux 状态映射到 props 不起作用 下一篇如果复选框处于活动状态，请检查 React JS