为什么 this.state.text 在函数中抛出错误？ [复制]

【问题标题】：why this.state.text is throwing an error in function? [duplicate]为什么 this.state.text 在函数中抛出错误？ [复制]
【发布时间】：2021-05-11 01:26:03
【问题描述】：

class SearchBar extends React.Component {

  onformsubmit(event) {
    event.preventDefault();
    console.log(this.state.text);
  }

  state = { text: '' }

  render() {
    return (
      <div className="ui segment">
        <form className="ui form" onSubmit={this.onformsubmit}>
          <div className="field">
            <label>Image Search: </label>
            <input type='text'
              onChange={(e) => { this.setState({ text: e.target.value }) }} //rerendered
              value={this.state.text} // overwrite by state.text 
            />
          </div>
        </form>
      </div>
    );
  }
}

所以我试图在用户按下“ENTER”时停止加载新页面，所以我编写了一个名为 onformsubmit() 的函数来防止默认行为，然后我尝试打印显示错误“无法读取”的状态值未定义的属性“状态”。我搜索了它我无法得到确切的原因。

【问题讨论】：

因为您的 onformsubmit 更改了上下文，而 this 在该点属于函数而不是类。使用 Hooks 的无数理由之一。

标签： reactjs

【解决方案1】：

问题

类组件中的this 未绑定到onformsubmit 处理函数，因此this.state 未定义。

解决方案

在构造函数中将this 绑定到onformsubmit。

constructor(props) {
  super(props0;
  this.onformsubmit = this.onformsubmit.bind(this);
  ...
}

或将onformsubmit 转换为箭头函数，以便自动为您绑定this。

onformsubmit = (event) => {
  event.preventDefault();
  console.log(this.state.text);
}

【讨论】：