React_javascript 기술에서 이벤트를 이에 바인딩하는 네 가지 방법에 대한 자세한 설명

React 구성 요소에서 각 메서드의 컨텍스트는 구성 요소의 인스턴스를 가리킵니다. 즉, 이는 자동으로 현재 구성 요소에 바인딩되며 React는 CPU와 메모리를 최대화하기 위해 이 참조도 캐시합니다. es6 클래스나 순수 함수를 사용할 때 이 자동 바인딩은 더 이상 존재하지 않으며 수동으로 바인딩을 구현해야 합니다.

React 이벤트 바인딩은 DOM 이벤트 바인딩과 유사하지만 차이점은 다음과 같습니다.

1. React 이벤트 이름은 카멜 표기법으로 지정되고 DOM 이벤트 이름 지정은 소문자로 지정됩니다.

2 jsx를 통해 함수를 이벤트 핸들러로 전달합니다. 문자열 대신.

3. React 이벤트는 false를 반환하여 기본 이벤트를 방지할 수 없습니다. 명시적으로 PreventDefault()를 호출해야 합니다.

다음 예:

4b9fb64e28bfa25ce78ce203c03210ee
Click me
5db79b134e9f6b82c0b36e0489ee08ed
class ActionLink extends React.Component {
constructor(props) {
super(props);
}
handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
render() {
return (
ce9b621fb6ec54951e7c0b38768a414bClick Me...5db79b134e9f6b82c0b36e0489ee08ed
);
}
}

ps: React 구성 요소 클래스의 메서드는 기본적으로 이를 구성 요소 인스턴스에 바인딩하지 않습니다. 수동으로 바인딩해야 합니다.

다음은 여러 가지 바인딩 방법입니다.

bind 방법

직접 바인딩은 바인딩(this)이지만, 이로 인해 발생하는 문제는 바인딩이 렌더링될 때마다 다시 바인딩된다는 것입니다. ;

class Home extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  };
 }
 del(){
  console.log('del')
 }
 render() {
  return (
   09d51344e61201747f3f0f261639e806
    c157f1b0f1442cd3850bd9da57d4d18e54bdf357c58b8a65c66d7c19c8e4d114
   94b3e26ee717c64999d7867364b1b4a3
  );
 }
}

생성자 내에서 바인딩

한 번만 바인딩하면 되며, 렌더링될 때마다 다시 바인딩할 필요가 없다는 장점이 있습니다.

class Home extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  };
  this.del=this.del.bind(this)
 }
 del(){
  console.log('del')
 }
 render() {
  return (
   <p className="home">
    <span onClick={this.del}></span>
   </p>
  );
 }
}

::매개변수를 전달할 수 없습니다

매개변수를 전달하지 않으면 이중 콜론을 사용할 수도 있습니다

class Home extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
  };
 }
 del(){
  console.log('del')
 }
 render() {
  return (
   <p className="home">
    <span onClick={::this.del}></span>
   </p>
  );
 }
}

화살표 함수 바인딩

화살표 함수는 함수에 대한 '구문 설탕'일 뿐만 아니라, 또한 더 이상 메서드를 바인딩할 필요가 없기 때문에 이 함수의 범위를 정의하는 this를 자동으로 바인딩합니다. 네 가지 유형의 JS 이 값 모드

HTML 태그에서 이 값을 사용하는 방법

위 내용은 React_javascript 기술에서 이벤트를 이에 바인딩하는 네 가지 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!