React this.setState is undefined

这是该类的未完成版本，但Typehead类的完成版本应打印出与匹配输入的道具的选项列表 - 基本上是自动完成功能。我遇到的问题是当我调用handleChange方法时，出现“无法读取属性'setState'undefined”的错误。这里是代码：React this.setState is undefined

import React from 'react' 

export default class Typehead extends React.Component { 
    constructor() { 
    super() 
    this.state = {} 
    } 

    handleChange(e) { 
    this.setState(previousState => { 
     previousState = e.target.value 
     return {previousState} 
    }) 
    console.log(this.state) 
    } 

    render() { 
    return (
     <form> 
     <div className="input-group"> 
      <label> 
      Choose a Track: 
      <input onChange={this.handleChange} type="text" 
      className="form-control" placeholder="Song Name"/> 
      </label> 
     </div> 
     </form> 
    ) 
    } 
}

任何解释为什么'this'在handleChange中未定义将不胜感激！

来源

2017-07-29 Nic Bonetto

请参阅处理React事件的文档：https：//facebook.github.io/react/docs/handling-events.html – aug

我认为这是最佳答案！真正的LPT在评论中。 –

您应该将组件绑定到handleChange。试试这个：

constructor() { 
    super() 
    this.state = {} 
    this.handleChange = this.handleChange.bind(this); 
    }

如果你不使用它，handleChange将'input'识别为'this'，但不识别组件。

来源

2017-07-29 01:05:35

感谢您的快速响应！修复了这个问题 –

就是因为事件处理程序的函数上下文被分配给你分配的事件处理......你必须明确地绑定功能或使用箭头函数的对象的原因...

我最常做的是在类的构造包括此：

this.fn = this.fn.bind(this)

这将保存功能方面它已被指定为事件处理程序（箭头功能也保持不同情境下）

希望这有助于后，我是typin g这在我的手机键盘上

来源

2017-07-29 01:10:51

React this.setState is undefined

回答

相关问题