ReactJS：onChange 事件未触发输入

Question

Here's the code

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

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

export default SearchBar;

There's no error still on input nothing get the console logged.

Screenshot of input and console

Answer 1

You need to bind your event handler to your class component as below

 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

As in the screenshot you have selected the errors. Click on the 10 messages (on the left side of the screenshot) and you will see the console output.

Answer 3

Works on my side... i highlighted the console.log outputs as shown on picture

otherwise if you needed to see the words you typed on the input tag you can just do console.log(event.target.value) instead of console.log(event)