事件目标在函数setState内为null [英] Event target is null inside functional setState

问题描述

想象一下某个组件的功能：

Imagine below function of some component:

handleInputChange(e) {
    // let val = e.target.value; - if I uncomment this, it works.

    // Update text box value
    this.setState(function (prevState, props) {
        return {
          searchValue: e.target.value,
        }
    })
}

和文本框，由a呈现上面组件的子组件，并收到 handleInputChange as props ：

and textbox, which is rendered by a child component of above component, and receives handleInputChange as props:

<input type="text" onChange={that.props.handleInputChange} value={that.props.searchValue} />

当我在文本字段中输入内容时，我收到错误无法读取属性' value'为null 。

When I enter something in text field I get error that Cannot read property 'value' of null.

如果我取消注释 handleInputChange 函数中的第一行，我在 val 变量中存储文本框值，它运行良好。想法为什么？

If I uncomment the first line inside handleInputChange function, where I store text box value inside val variable, it works well. Ideas why?

推荐答案

那是因为React正在做事件轮询 - 回调完成后，所有事件的字段都变为无效，因此您在异步 setState 回调。

That is because of React doing event polling - all the event's fields get nullified after the callback is done, so you observe them as nulls in the asynchronous setState callback.

请将您的事件数据复制到变量或调用 event.persist（）禁用此行为。

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,
      }
  })
}

或：

handleInputChange(e) {
  const val = e.target.value;

  this.setState(function (prevState, props) {
      return {
        searchValue: val
      }
  })
}

请参阅以下示例：

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>

这篇关于事件目标在函数setState内为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！