Question

我在使用react时遇到了一个问题，我试图点击列表项并为类调用一个方法，selectTopic，但是我得到了返回＆＃34; Uncaught TypeError：_this3 .chooseTopic不是函数ReactJS＆＃34;

这大致是我的班级：

class Topicselect extends Component {
    constructor(props){
        super(props);
        this.state = {
            topics: ['math','english','science']
        }
    }
    chooseTopic(){
        console.log('has been clicked')
    }
    render(){
        const topics = this.state.topics.map(function(topic, i){
            return(<li key={i} onClick={() => this.chooseTopic()}>{topic}
            </li>)
        })
        return(
            <div className="topicselect">   
                <ul>
                  <p onClick={()=> this.chooseTopic()}>hello world</p>
                 {topics}
               </ul>
            </div>  
        )
    }
}

export default Topicselect;

当我点击hello world段时它会调用该函数，但是当我点击列表项时它会给我错误，Uncaught TypeError：_this3.chooseTopic不是函数ReactJS

任何想法？

Answer 1

那是因为你正在为Array#map回调使用一个函数。使用箭头功能：

const topics = this.state.topics.map((topic,  i) => {
  return (
    <li key={i} onClick={() => this.chooseTopic()}>
      {topic}
    </li>
  )
})

原因是，在函数表达式中，this不会引用您的组件，它取决于它的调用方式。由于this未引用该组件，因此找不到chooseTopic作为方法的错误。箭头函数不绑定this，因此引用封闭范围的this - 组件。

Answer 2

您需要绑定this

``` 构造函数（道具）{ //其他东西

//此绑定对于使this在回调中起作用是必要的 this.chooseTopic = this.chooseTopic.bind（this）; } ```

在JSX回调中你必须要小心这个含义。在JavaScript中，默认情况下不会绑定类方法。如果你忘记绑定this.handleClick并将其传递给onClick，那么在实际调用该函数时这将是未定义的。

这不是特定于React的行为;它是JavaScript中函数如何工作的一部分。通常，如果您在其后引用没有（）的方法，例如onClick = {this.handleClick}，则应绑定该方法。

如果调用bind会让你烦恼，有两种方法可以解决这个问题。如果您使用的是实验属性初始值设定项语法，则可以使用属性初始值设定项来正确绑定回调：

https://facebook.github.io/react/docs/handling-events.html

Answer 3

this对象没有引用。在React中，回调函数或事件处理程序不知道它是react Component类的一部分。

可以绑定

this对象，或者在引用回调（事件处理程序）时使用箭头函数语法。

此概念见React: this is null in event handler。

不确定此代码是否适用于您的情况。出于演示目的：

return(<li key={i} onClick={ this.chooseTopic.bind(this) }>{topic}

或

return(<li key={i} onClick={(e) => this.chooseTopic(e)}>{topic}

您可能需要修改事件处理程序的签名以接受事件对象：

chooseTopic(e){
...

未捕获的TypeError：_this3.chooseTopic不是函数ReactJS

3 个答案: