반응 클릭 이벤트를 작성하는 여러 가지 방법은 무엇입니까?

작성 방법: 1. "onClick={this.handleClick}"을 사용합니다. 2. "onClick={this.handleClick.bind(this)}"를 사용합니다. 3. "{(params)=>this.handleClick을 사용합니다. ( 매개변수)}".

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

반응 클릭 이벤트를 작성하는 여러 가지 방법은 무엇입니까?

본론으로 바로 들어가려면 먼저 버튼에 이벤트를 추가하는 올바른 방법을 살펴보겠습니다.

버튼에 onclick 이벤트를 추가하는 올바른 방법

• 매개변수가 전달되지 않습니다

// handlerClick은 <화살표 함수>를 사용하여
onClick = { this.handleClick }

// handleClick用箭头函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick }></Button>

handleClick이 다음과 같이 정의됩니다.

handleClick = () => { // do something here};

또는

// handlerClick 사용 (일반 함수)
onClick = { this .handleClick.bind(this) }

// handleClick用普通函数定义时，为onClick添加事件应该这么写：<Button onClick = { this.handleClick.bind(this) }></Button>

handleClick은 다음과 같이 정의됩니다.

handleClick () { // do something here }

• passparameters

//handleClick은 <화살표 함수>를 사용하여 정의할 수 있습니다. ;/(일반 함수)
onClick = { (params ) => this.handleClick(params) }

 // handleClick可以是箭头函数，也可以是普通函数<Button onClick = { (params) => this.handleClick(params) }></Button>

다음으로 이렇게 작성하는 것이 왜 올바른지 분석해 보겠습니다.

이 포인팅 분석

이해하세요 이 문제는 다음 문장에서 발생합니다.

화살표 함수에는 자체 this가 없으므로 이것이 정의될 때 컨텍스트의 this입니다.
일반 함수에는 자체 this가 있으므로 this는 컨텍스트의 this입니다. 실행될 때

먼저 첫 번째 항목을 살펴보겠습니다. 작성 방법:

1.onClick = { this.handleClick } + 화살표 기능

아래 코드는 다음과 같습니다. onclick 이벤트(완전한 이벤트)를 추가합니다. jsx) 버튼

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. 定义handleClick事件
    handleClick = () => {
        console.log(this); //3. this指向examplePage
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

버튼을 클릭하고 examplePage this:

this: examplePage {props: Object, context: {}, refs: {}, updater: Object, state: {}에 대한 포인터를 인쇄합니다. ...}

분석:

• Button을 클릭하면 handlerClick 이벤트를 Handling 함수라고 합니다.
• handleClick은 화살표 함수이므로 이것이 정의의 맥락입니다.
• handleClick은 examplePage 클래스에 정의되어 있습니다.
• 이것은 examplePage
• 를 가리키고 있습니다. 화살표 함수가 일반 함수로 변경되었는지 살펴보겠습니다. 상황:

2.onClick = { this.handleClick.bind(this) } + 일반 함수

먼저 살펴보겠습니다. 바인딩(this)이 사용되지 않으면 console.log(this)가 출력할 내용:

// examplePage.jsximport React from 'react';import { Button } from 'antd';class examplePage extends React.Component {
    // 2. !将箭头函数改为普通函数
    handleClick () {
        console.log(this); // 3. this 为 undefined
    }

    render() {
        return (
            <p>
            // 1. 为onClick绑定 handleClick事件处理函数
                <Button onClick = { this.handleClick }>click me</Button>
            </p>
        )
    }}export default examplePage;

버튼을 클릭하고 다음을 인쇄하세요:

this: undefine

Analytic:

• Button을 클릭하면, handlerClick 이벤트 처리 함수가 호출되는데,
• handleClick은 일반적인 함수이므로 실행 컨텍스트는 다음과 같습니다.
• handleClick은 페이지에서 Button을 클릭할 때 실행됩니다. 컨텍스트는 html 페이지
• 입니다. 이것은 정의되지 않았으며 examplePage를 가리키지 않습니다

참고: 엄격한 버전에서 기본값은 더 이상 창이 아니지만 정의되지 않았습니다
모듈 코드는 항상 엄격 모드 코드입니다.
ClassDeclaration 또는 ClassExpression의 모든 부분은 엄격합니다. 모드 코드입니다.

따라서 이 포인터를 변경하려면 바인드를 사용해야 합니다. 즉:

render() {
    return (
        <p>
        // 用bind改变this指向
           <Button onClick = { this.handleClick.bind(this) }>click me</Button>
        </p>
    )}

분석:

• 버튼을 클릭하면 호출합니다. HandleClick 이벤트 처리 함수는 바인딩() 함수를 통해 이를 전달합니다. render 함수(클래스 examplePage를 가리킴)를 핸들클릭에 변수로 넣습니다. 원래 HandleClick은 일반 함수이고 이것은 실행 컨텍스트의 this(예: undefed)이지만, 바인드(this)가 전달되었기 때문에 - - this를 가리킵니다. examplePage
• 그래서 이때 이것은 정의되지 않은 문제를 해결하는 examplePage를 가리킵니다
• 위의 두 가지를 이해하면 마지막이 이해하기 쉽습니다

3. onClick = { (params) => ; this.handleClick(params) } + 일반 함수/화살표 함수 사용 가능

render() {
    return (
        <p>
        // 通过箭头函数传参
           <Button onClick = { (params) => this.handleClick(params) }></Button>
        </p>
    )}

분석:

화살표 함수를 통한 매개변수 전달은 onClick 바인딩과 동일합니다. 화살표 함수가 정의됩니다

버튼을 클릭하면 화살표 함수(params) => this.handleClick(params)이 호출되므로 이것이 정의될 때 컨텍스트의 this이고,

• handleClick은 examplePage 클래스에 정의되어 있으며,
• 따라서 이것은 examplePage
• 를 가리킵니다. 이 아이디어는 onClick 응답 이벤트가 화살표 함수로 작성되는 한 호출 시 구성요소 클래스를 가리키므로 문제가 없을 것입니다
• 그런 다음 매개변수가 전달되지 않으면 다음과 같이 작성하세요.

• <Button onClick = { () => this.handleClick() }></Button>

하지만 React가 () => this.handleClick()을 직접 구문 분석하기 때문에 이것은 실현 가능하지 않습니다. handlerClick이 호출됩니다. 이는 onClick = "handleClick 호출 결과"와 동일합니다.

따라서 매개 변수가 전달되지 않으면 다음을 수행할 수 있습니다. 다음과 같이 작성하세요:

<Button onClick = { this.handleClick }></Button>

Summary

처음 세 가지 질문에 답할 수 있습니다

• 什么情况下需要bind(this)？
  答： onClick传入的事件处理函数是普通函数的时候，需要bind(this)来改变指向
• 为什么要用bind(this)?
  答：如果不用bind(this), this会指向undefined
• 可以不用bind(this)吗？
  答：用箭头函数 (用箭头函数定义事件处理函数）

//定义handleClick事件
handleClick = () => {
      // do something here
};

//为onClick绑定handleClick事件处理函数
<Button onClick = {this.handleClick}></Button> // 不传参
<Button onClick = {（param) => this.handleClick(param) }></Button> // 传参

推荐学习：《react视频教程》

위 내용은 반응 클릭 이벤트를 작성하는 여러 가지 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!