React 이벤트 바 인 딩 방식 상세 설명

무엇react응용 에서 사건 명 은 모두 작은 낙타 봉 형식 으로 쓰 인 다.예 를 들 어onclick은onClick으로 고 쳐 야 한다.
가장 간단 한 이벤트 귀속 은 다음 과 같 습 니 다:


class ShowAlert extends React.Component {
  showAlert() {
    console.log("Hi");
  }

  render() {
    return <button onClick={this.showAlert}>show</button>;
  }
}

위 에서 볼 수 있 듯 이 이벤트 바 인 딩 방법 은{}으로 싸 야 합 니 다.
상기 코드 는 문제 가 없 는 것 처럼 보이 지만 처리 함수 출력 코드 를console.log(this)로 바 꿀 때 단 추 를 누 르 면 콘 솔 출력undefined을 발견 할 수 있 습 니 다.
2.어떻게 귀속 합 니까
위의 정확 한 출력this문 제 를 해결 하기 위해 흔히 볼 수 있 는 바 인 딩 방식 은 다음 과 같다.

render 방법 중 bid 사용

render 방법 에서 화살표 함수 사용

constructor 에서 bind

정의 단계 에서 화살표 함수 바 인 딩 사용

render 방법 에서 bid 사용 하기
클래스 구성 요 소 를 사용 하면 구성 요소/요소onClick속성 을 지정 합 니 다.현재 구성 요소this를 현재 구성 요소 로 연결 합 니 다.이 문 제 를 해결 하 는 방법 은 이벤트 함수 이후.bind(this)를 사용 하여this현재 구성 요소 에 연결 하 는 것 입 니 다.


class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>test</div>
    )
  }
}

이러한 방식 은 구성 요소 가 매번render렌 더 링 할 때마다 다시bind작업 을 하여 성능 에 영향 을 미친다.
render 방법 에서 화살표 함 수 를 사용 합 니 다.ES6의 컨 텍스트 를 통 해this의 가리 키 는 방향 을 현재 구성 요소 에 연결 합 니 다.마찬가지 로 매번render에 새로운 방법 을 생 성하 여 성능 에 영향 을 줍 니 다.


class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={e => this.handleClick(e)}>test</div>
    )
  }
}

constructor 에서 bindconstructor에서 현재 구성 요 소 를 미리bind하면render작업 에서 중복 바 인 딩 을 피 할 수 있 습 니 다.


class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

정의 단계 화살표 함수 바 인 딩 사용
상기 방식 세 가지 와 같이render작업 에서 중복 연결 을 피 할 수 있 고 실현 도 매우 간단 하 다.다음 과 같다.


class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

구별
상술 한 네 가지 방법의 방식 은 주로 다음 과 같다.

작성 에 있어 서:방식 1,방식 2 쓰기 가 간단 하고 방식 3 의 작성 이 너무 복잡 합 니 다

성능 측면:방식 1 과 방식 2 는 구성 요소 render 가 있 을 때마다 새로운 방법 인 스 턴 스 를 생 성하 고 성능 문제 가 부족 합 니 다.이 함수 가 속성 값 으로 하위 구성 요소 에 전 달 될 때 추가 렌 더 링 을 가 져 옵 니 다.한편,방식 3,방식 4 는 하나의 방법 인 스 턴 스 만 생 성 할 수 있다

.
상술 한 것 을 종합 하면 방식 넷 째 는 가장 좋 은 이벤트 귀속 방식 이다
React 이벤트 바 인 딩 방식 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 이벤트 바 인 딩 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

바삭바삭하고 간단한 결제 페이지 만들기

먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

React 이벤트 바 인 딩 방식 상세 설명

좋은 웹페이지 즐겨찾기