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>


Related Query

More Query from same tag