javascript - ReactJS onClick 函数不起作用，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 “这是一个 ReactJS 15.5 教程”super 在此之前被调用，因此不能为 null。

我尝试绑定(bind)此，但我不知道如何操作，我的代码似乎失败了。带有createReactClass的旧代码具有自动绑定(bind)。

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'/>