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 this但我不知道怎么回事，我的代码似乎失败了。 createReactClass的旧代码有auto-binding tho。

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所说的，但还有另一种方法 - 使用箭头功能。这样，该函数将自动获取类实例的“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），除非你真的想说按摩： - ）

Answer 3

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

它必须在constructor中，如下所示：

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

或者，要在调用function而不必bind时保留上下文，您可以在链接中使用arrow function，如下所示：

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

Answer 4

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

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

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

}

或使用像这样的胖箭头函数：

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

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

Answer 5

尝试AssertResultSetsHaveSameMetaData

删除onClick={() => ::this.sayMassage}

-

var sayMassage = this.sayMassage.bind(this);这里使用当前范围绑定它。

::箭头函数声明一个函数，当您单击该元素时将执行该函数。如果您不将该呼叫声明为函数，则每次重新加载页面时都会执行该调用，而无需采取任何措施。

ReactJS onClick函数不起作用，TypeError：这是null

5 个答案: