ReactJS：onChange 事件未触发输入

Question

这是代码

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

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

export default SearchBar;

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

输入和控制台截图

Answer 1

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

 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;

Answer 2

如屏幕截图所示，您选择了错误。 单击10 messages （在屏幕截图的左侧），您将看到控制台 output。

Answer 3

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

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