ReactJS：onChange 事件未触发输入答案

【问题标题】：ReactJS: onChange event is not firing inputReactJS：onChange 事件未触发输入
【发布时间】：2021-12-30 23:46:03
【问题描述】：

这是代码

import React, { Component, useImperativeHandle } from 'react';

class SearchBar extends Component {
render() {
return <input onChange={this.onInputChange} />;
}
onInputChange(event) {
  console.log(event)
 }
}

export default SearchBar;

输入仍然没有错误，没有记录控制台。

Screenshot of input and console

【问题讨论】：

标签： javascript reactjs onchange

【解决方案1】：

您需要将事件处理程序绑定到您的类组件，如下所示

 import React, { Component, useImperativeHandle } from 'react';

 class SearchBar extends Component {
   constructor(props) {
     super(props);
     this.onInputChange = this.onInputChangebind(this); //You NEEDED THIS
  }
   
  render() {
    return <input onChange={this.onInputChange} />;
  }
  onInputChange(event) {
    console.log(event)
  }
  }

export default SearchBar;

【讨论】：

它给出错误 > 未捕获的 TypeError: _this.onInputChangebind 不是函数
我将此行更新为this.onInputChange = this.onInputChange.bind(this); 现在它没有给出错误但控制台日志上仍然没有任何内容。
是的，添加 onInputChange.bind(this) 是一个很好的修正

【解决方案2】：

在我这边工作...我突出显示了 console.log 输出，如图所示

否则，如果您需要查看您在输入标签上键入的字词，您可以这样做 console.log(event.target.value)instead of console.log(event)

【讨论】：

谢谢！现在它也在我这边工作。