score:61
Accepted answer
that is because react before version 17 was doing event pooling - all the event's fields get nullified after the callback is done, so you observe them as nulls in the asynchronous setstate
callback.
please copy your event data to a variable or call event.persist()
to disable this behavior.
handleinputchange(e) {
e.persist();
this.setstate(function (prevstate, props) {
return {
searchvalue: e.target.value,
}
})
}
or:
handleinputchange(e) {
const val = e.target.value;
this.setstate(function (prevstate, props) {
return {
searchvalue: val
}
})
}
please see the following example:
class example extends react.component {
constructor() {
super()
this.state = { }
}
handleinputchangecopy = (e) => {
const val = e.target.value;
console.log('in callback');
console.log(e.target.value);
this.setstate(function (prevstate, props) {
console.log('in async callback');
console.log(val);
return {
searchvalue: val
}
})
}
handleinputchangepersist = (e) => {
e.persist();
console.log('in callback');
console.log(e.target.value);
this.setstate(function (prevstate, props) {
console.log('in async callback');
console.log({ isnull: e.target === null })
console.log(e.target.value);
return {
searchvalue: e.target.value
}
})
}
handleinputchange = (e) => {
console.log('in callback');
console.log(e.target.value);
this.setstate(function (prevstate, props) {
console.log('in async callback');
console.log({ isnull: e.target === null })
console.log({ event: e });
console.log(e.target.value);
return {
searchvalue: e.target.value
}
})
}
render() {
return (
<div>
<div>copy example</div>
<input
type="text"
onchange={this.handleinputchangecopy}
/>
<p>persist example</p>
<input
type="text"
onchange={this.handleinputchangepersist}
/>
<p>original example - please note nullified fields of the event in the async callback. <small>breaks the example, please re-run after a script error</small></p>
<input
type="text"
onchange={this.handleinputchange}
/>
<div style={{height: 300}} />
</div>
)
}
}
reactdom.render(
<example searchvalue={"test"} />,
document.getelementbyid('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
Source: stackoverflow.com
Related Query
- Event target is null inside functional setState
- How to test methods inside functional component using enzyme as instance() returns null for shallow wrapper?
- React: How to use setState inside functional component?
- When does React re-render after a setState call made inside an event handler
- event data inside settimeout function is null in reactJs
- React won't batch setState calls inside event handler if there's an await call before or between them
- TypeError: evt.target is null in functional setState
- react js setstate inside event inline function
- Intervention Unable to preventDefault inside passive event listener due to target being treated as passive
- How can i get setState to work in an event handler in a functional React component
- React functional component : can we setState on form load event
- how to set values for variables inside setState if those variables are null
- setState is not working inside event function
- How to use setState inside render function without onClick event
- Functional components, reactJS. I have a button next to a span inside a div. I want the button to target the span so I can delete the span on click
- Event target comes back as null when I try to read it after uploading a file
- How to get the event target inside the parent component in ReactJS
- How to call event target inside a function with enzyme - React
- Event handling inside stateless functional components in React, Typescript
- Can i setState of a react functional component from a external gloabal function present inside script tag?
- setState not working inside useEffect hook and token is showing null everytime
- Click event inside of Modal: Cannot read property 'click' of null
- React setState object key with conditional event target
- Unable to access React instance (this) inside event handler
- Using async/await inside a React functional component
- ReactJS: setState on parent inside child component
- Get object data and target element from onClick event in react js
- When to use functional setState
- Functional Component: Write functions inside or outside the component?
- React: this is null in event handler
More Query from same tag
- How to trigger a state update without triggering it’s useEffect
- How to pass a multi-line string as props in a React component?
- React global declare variables getting Flow type error
- How to detect if another component is present in the document?
- Using Typescript in Reactjs
- How do I not include duplicate values in a React state array , how to prevent duplication of values in array?
- Cannot initialize redux-form with values comming from Axios
- click an image for outside url react.js
- How can i filter my State with onChange in reactJs?
- Making several API requests at once?
- Why should you `extend` Component in React (Native)?
- How to handle click event to change value in array to true
- How to solve Error Use object destructuring prefer-destructuring - React
- How to Arrange Items using React BootStrap
- Cannot read property 'image_url' of undefined in React
- How to create auto growing-shrinking input by using React?
- Does callback of setState happen after( in sync) state is set?
- What is bound method in React?
- How do I invoke a function in a parallel component in React?
- How to add Facebook chat messenger to Next.js?
- Axios data being returned, but calling code not working
- React renders pointless div breaking my flexbox style
- fontFamily unrecognized in react native ios app
- React useState re-rendering
- Real time update with ReactJS, Redux and Websocket
- Element is not removed from array
- how to handle multiple refs inside a map function
- Can't get state with react-router. (maybe not working react-redux connect())
- How do I iterate over an array of objects match a common element from another array and return the key value for "name"
- Invariant failed: You should not use <Switch> outside a <Router>