Question

componentDidMount(){

  logsAB(a,b){
    console.log(a,b);
  }
}

renderListItems(listItem,key){
  var x = '1';
  var y = '2';

  return (
    <li key={key}>
     <a href="#" className={key} onClick={() => this.logsAB(x,y)}>{blahblah.blah.foo}</a></li>


)
}

我试图调用＆＃39; componentDidMount＆＃39;中的函数是错误的？我想，因为在加载html之后会触发componentDidMount，所以点击处理程序应该在加载后触发。从而使功能可用。

Answer 1

componentDidMount是主要Component类的函数。 componentDidMount内的函数仅限于该函数，除非您将它们绑定到this范围，如下所示：

componentDidMount(){
  this.logsAB = (a, b) => {
    console.log(a, b);
  }
}

renderListItems(listItem, key){
  var x = '1';
  var y = '2';

  return (
    <li key={key}>
     <a href="#" className={key} onClick={() => this.logsAB(x, y)}>
       {blahblah.blah.foo}
     </a>
    </li>
  )
}

这将有效，但不遵循正常的反应约定，而是执行以下操作：

logsAB(a, b){
  console.log(a, b);
}

renderListItems(listItem, key){
  var x = '1';
  var y = '2';

  return (
    <li key={key}>
     <a href="#" className={key} onClick={() => this.logsAB(x, y)}>
       {blahblah.blah.foo}
     </a>
    </li>
  )
}

上面的代码将函数logsAB放在Component范围内，让它通过this.logsAB调用。 componentDidMount不需要在Component上设置函数。

访问componentDidMount（）内部的函数

1 个答案: