리액트의 합성 이벤트[Synthetic events in React]

리액트 이벤트 핸들러 내에서 이벤트 객체는 SyntheticEvent 객체로 래핑됩니다. 이러한 개체는 풀링됩니다. 즉, 이벤트 처리기에서 받은 개체는 성능을 높이기 위해 다른 이벤트에 다시 사용됩니다.

따라서 재사용으로 인해 이벤트의 속성이 재설정되었기 때문에 이벤트 객체의 속성에 비동기적으로 액세스 할 수 없습니다.

이벤트가 SyntheticEvent 풀 내에서 재사용되었기 때문에 다음 코드는 null을 기록합니다:

function handleClick(event) {
  setTimeout(function () {
    console.log(event.target.name);
  }, 1000);
}

이를 방지하려면 관심있는 이벤트의 속성을 자체 바인딩에 저장해야 합니다:

function handleClick(event) {
  let name = event.target.name;
  setTimeout(function () {
    console.log(name);
  }, 1000);
}

Provide feedback