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

이 글에서는 주로 React에서 이를 바인딩하는 4가지 이벤트 방법을 소개하고 참고용으로 올려드립니다.

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

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

1.React 이벤트의 이름은 다음과 같습니다. 카멜 케이스에서는 DOM 이벤트 이름이 소문자입니다.

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

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

다음 예:

<a href="#" onclick="console.log(&#39;The link was clicked.&#39;); return false">
Click me
</a>

class ActionLink extends React.Component {
constructor(props) {
super(props);
}

handleClick(e) {
e.preventDefault();
console.log(&#39;The link was clicked.&#39;);
}

render() {
return (
<a href="#" onClick={this.handleClick.bind(this)}>Click Me...</a>
);
}

}

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

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

bind 방법

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

class Home extends React.Component {

 constructor(props) {
  super(props);
  this.state = {
  };
 }

 del(){
  console.log('del')
 }

 render() {
  return (
   <p className="home">
    <span onClick={this.del.bind(this)}></span>
   </p>
  );
 }
}

생성자 내에서 바인딩

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

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를 자동으로 바인딩합니다. 더 이상 바인딩할 필요가 없기 때문입니다.

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

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련글 :

이미지를 데이터베이스에 업로드하고 vue

vue.js 라우팅 사용 후 실패 문제 해결

완벽하게 파싱하는 방법 js의 데이터

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