ReactJS onClick function does not work, TypeError: this is null

Question

我尝试学习 React 但似乎在新版本中有一些变化：

class Reactapp extends React.Component{

    constructor(){
        super();
    }

    sayMassage(){
        console.log(this.props.children);
    }

    render(){
        var sayMassage = this.sayMassage.bind(this);
        return(
            <div>
                <h3> Hello {this.props.word}</h3>
                <p>
                    <a href="#" onClick={this.sayMassage}>
                        Click Me
                    </a>
                </p>;
            </div>
        );
    }
}

ReactDOM.render(
    <div>
        <Reactapp word="React">This is a ReactJS 15.5  Tutorial</Reactapp>
    </div>,
    document.getElementById('root')
);

这段代码应该可以工作，但我似乎遗漏了什么。应该 console.log "This is a ReactJS 15.5 Tutorial" super 在此之前被调用，所以这不可能是 null.

我试过 bind this 但我不知道怎么做，我的代码似乎失败了。 createReactClass 的旧代码有 auto-binding。

Answer 1

这是一个作用域问题，只需在构造函数中写入这一行，它就会起作用：

this.sayMassage = this.sayMassage.bind(this);

并删除这个：

var sayMassage = this.sayMassage.bind(this);

检查工作示例：

class Reactapp extends React.Component{
    constructor(){
      super();
      this.sayMassage = this.sayMassage.bind(this);
    }
    
    sayMassage(){
      console.log(this.props.children);
    }

    render(){
      
      return(
         <div>
            <h3> Hello {this.props.word}</h3>
            <p>
               <a href="#" onClick={this.sayMassage}>
                  Click Me
               </a>
            </p>
         </div>
      );
   }
}

ReactDOM.render(
      <Reactapp word="React">This is a ReactJS 15.5  Tutorial</Reactapp>,
      document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='root'/>

Answer 2

你可以按照 Mayank 所说的去做，但还有另一种方法——使用箭头函数。这样，该函数将自动获取 class 实例的 'this'。

它会像下面这样。当然，您将不得不删除您最初所做的绑定。

class Reactapp extends React.Component{

sayMassage = () => {
  console.log(this.props.children);
}

render(){

  return(
<div>
<h3> Hello {this.props.word}</h3>
<p><a href="#" onClick={this.sayMassage}>Click Me</a></p>;
</div>
  );
 }
}

ReactDOM.render(
<div>
  <Reactapp word="React">This is a ReactJS 15.5  Tutorial</Reactapp>
</div>,
document.getElementById('root')
);

P.S。函数名称中有一个错字，sayMassage（应该是 sayMessage），除非你真的想说 Massage :-)

Answer 3

首先，删除你的行var sayMassage = this.sayMassage.bind(this);

它必须在 constructor 中，像这样：

constructor(){
   super();
   this.sayMassage = this.sayMassage.bind(this);
}

或者，为了在调用 function 时保持上下文而不必 bind，您可以在 link 中使用 arrow function，如下所示：

<a href="#" onClick={() => this.sayMassage}>Click Me</a>

Answer 4

解决范围问题的一个方法是将绑定移动到 class 构造函数，如下所示：

constructor(props) {
super(props);
this.state = {...};

this.sayThaiMassage = this.sayThaiMassage.bind(this);

}

或像这样使用粗箭头函数：

myFatGreekMassage = (event ) => {
  ...your code
}

虽然粗箭头功能保持范围（就是这样），但您的问题也已解决。

Answer 5

尝试onClick={() => ::this.sayMassage}

并删除 var sayMassage = this.sayMassage.bind(this);

--

:: 这里将 this 与当前作用域绑定。

() => 箭头函数声明了一个函数，当您单击该元素时将执行该函数。如果您没有将调用声明为函数，它将在您每次重新加载页面时执行，无需任何操作。

ReactJS onClick function does not work, TypeError: this is null

ReactJS onClick function does not work, TypeError: this is null

javascript

jsx

reactjs