反应this.setState未定义

Question

这是该类的未完成版本,但类Typehead的完成版本应打印出与输入匹配的道具中的选项列表 - 基本上是自动完成功能.我遇到的问题是当我调用handleChange方法时,出现错误"无法读取属性'未定义的setState'".这是代码:

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中未定义的解释将不胜感激!

Answer 1

您应该将组件绑定到handleChange.试试这个:

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

如果你不使用它,handleChange会将'input'识别为'this'而不是component.