기능하는 setState 내에서 이벤트 대상이 null입니다.

기능하는 setState 내에서 이벤트 대상이 null입니다.

일부 컴포넌트의 아래 기능을 고려합니다.

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

및 텍스트박스는 상기 컴포넌트의 자 컴포넌트에 의해 렌더링되며,handleInputChange~하듯이props:

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

텍스트 필드에 입력하면 다음과 같은 오류가 발생합니다.Cannot read property 'value' of null.

첫 번째 줄의 코멘트를 해제하면handleInputChange텍스트 상자 값을 저장하는 기능val변수, 잘 작동합니다.아이디어 왜?

이는 버전 17이 이벤트풀링을 실행하기 전에 리액션이 이루어지기 때문입니다.콜백이 완료되면 이벤트의 모든 필드가 무효가 되기 때문에 비동기에서는 늘로 인식됩니다.setState콜백

이벤트 데이터를 변수 또는 호출에 복사하십시오.event.persist()이 동작을 디세블로 합니다.

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>

언급URL : https://stackoverflow.com/questions/44708518/event-target-is-null-inside-functional-setstate