javascript - Facing issue on onChange function in React

Question

facing issue during getting target value in this case i can't be able to add the value. Whereas with same code some other places it is working fine. Please explain about expected scanarios. here is my code

<input type="text" value={filterEventValue} name='filterEventValue' autocomplete="off" onChange={ this.filterEventUsers} />


 filterEventUsers = (e) => {
        console.log("e ::", e.target);
    }

When I am typing inside text field key is is not being typed inside field. outPut:

question from:https://stackoverflow.com/questions/65917565/facing-issue-on-onchange-function-in-react

Answer 1

you should keep the input value in the state, and update it when typing:

constructor(props) {
  super(props);
  this.state = { filterEventValue: '' };
}

filterEventUsers = (e) => {
  console.log("e ::", e.target);
  this.setState({ filterEventValue: e.target.value });
}

render() {
   return (
    <input type="text" value={filterEventValue} name='filterEventValue'  
      autocomplete="off" onChange={this.filterEventUsers.bind(this)} />
   )
}