input field target is null while accessing in onChange field in reactjs

Question

Even if I am assigning value to name and value fields, event.target is getting as null. event.target.value is getting value but not any other.

    <input type= "text" 
       name= {value}
       value = {currentValue}
       onChange = { (e) => this.onInputChanged(e) } 
       disabled = { disabled }
    />

    onInputChanged = async (e) => {
       await this.setState({ currentValue: e.target.value })
       console.log('event', e.target);    //This is showing null
       this.props.onInputChange(e);
    }

you need to set the value to get value share some of your codebase where you are struggling — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Sep 23, 2019 at 9:05

trixn · Accepted Answer · 2019-09-23 14:37:13Z

14

React reuses the synthetic event object so you can't use it in an async context as it is.

From the docs:

The SyntheticEvent is pooled. This means that the SyntheticEvent object will be reused and all properties will be nullified after the event callback has been invoked. This is for performance reasons. As such, you cannot access the event in an asynchronous way.

Note:

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

You either need to extract the information synchronously or call event.persist() to persist the object before using it in an async context.

Extracting the value synchronously:

onInputChanged = event => {
   const value = event.target.value;
   (async () => {
       await this.setState({ currentValue: value });
       this.props.onInputChange(e);
   })();           
}

Persisting the event before using it in an async context:

onInputChanged = event => {
   event.persist();
   (async () => {
       await this.setState({ currentValue: e.target.value });
       console.log('event', e.target);
       this.props.onInputChange(e);
   })();           
}

edited Sep 23, 2019 at 14:37

answered Sep 23, 2019 at 9:13

trixn

16.4k2 gold badges40 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emile Bergeron Over a year ago

this.setState returns undefined, so await will only work if you win the race-condition.

Collectives™ on Stack Overflow

input field target is null while accessing in onChange field in reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related