집 > 기사 > 웹 프론트엔드 > 반응 이벤트를 여기에 바인딩하는 여러 가지 방법

반응 이벤트를 여기에 바인딩하는 여러 가지 방법

php中世界最好的语言원래의: 2018-03-17 09:47:331825검색

이번에는 여기에 리액트 이벤트를 바인딩하는 여러 가지 방법을 알려드리겠습니다. 여기에 리액트 이벤트를 바인딩할 때 주의사항은 무엇인가요?

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

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

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

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

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('The link was clicked.');
}
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>
  );
 }
}

ConstructorInner 바인딩

생성자 내에서 바인딩하면 됩니다. 장점은 렌더링할 때마다 다시 바인딩하지 않고 한 번만 바인딩하면 되며 다른 곳에서 함수를 다시 바인딩할 필요가 없다는 것입니다.

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

화살표 함수 바인딩

화살표 함수는 함수의 구문일 뿐만 아니라 Sugar ', 또한 이 함수 범위 를 정의하는 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>
  );
 }
}

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 중국 웹사이트의 PHP 기타 관련 기사에 주목하세요!