Question

0

138

Views

ReactJS: onChange event is not firing input

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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T06:39:35.417Z

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 · 2022-07-10T06:39:35.422Z

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)

0

138

ReactJS: onChange event is not firing input

2 answers

0

0

Find remote jobs

Andres GPT