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会识别输入＆＃39;作为＆＃39;这个＆＃39;但不是组件。

Answer 2

之所以如此，是因为事件处理程序的函数上下文被分配给您将事件处理程序分配给的对象......您必须显式绑定该函数或使用箭头函数...

我通常做的是在类构造函数中包含它：

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

这将在将函数上下文指定为事件处理程序（箭头函数也保留上下文）后保留它。

希望这有帮助，我在手机的键盘上输入了这个

反应this.setState未定义

2 个答案: