React의 컴포넌트 이벤트 사용에 대한 자세한 설명

이번에는 React에서 컴포넌트 이벤트를 사용하는 방법에 대해 자세히 설명하겠습니다. React에서 컴포넌트 이벤트를 사용할 때 주의사항은 무엇인가요?

Events 및 ref

Events는 DOM 노드에 직접 기록될 수 있으며 ref

import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    focusHandler(){
        this.refs.name.focus();
    }
    render(){
        return (
            <p>
                <input type="text" name="name" placeholder="" ref="name"/>
                <input type="button" name="" value="focus" onClick={this.focusHandler} />
            </p>
        );
    }
};
ReactDOM.render(<Component1/>, document.getElementById('p1'));

Effect Preview

Event 객체를 통해 DOM 노드를 얻을 수 있습니다. - event

React는 기본적으로 이벤트 메서드에 형식 매개변수를 전달합니다. events를 호출하세요. 이 개체는 합성 이벤트이므로 브라우저 호환성 문제에 대해 걱정할 필요가 없습니다. events，该对象是一个合成事件，所以不需要担心浏览器兼容的问题。

import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    submit(e){
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)

事件 —— this 指针

在所有的事件当中，首先都要弄明白 this 指向哪里。而 React 事件中（如上面的案例）默认的 this 都是 undefined

class Component1 extends React.Component{
    submit = (e) => {
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}

이벤트 - 이 포인터

모든 이벤트에서 먼저 this가 가리키는 위치를 파악해야 합니다. 위의 경우와 같은 React 이벤트에서 기본 this는 정의되지 않음입니다. this 포인터가 구성 요소 개체 자체를 올바르게 가리키도록 하려면 다음 메서드를 사용하세요. 일반적으로 사용할 수 있습니다.

이벤트 정의 시 화살표 함수 사용

class Component1 extends React.Component{
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={(e) => this.submit(e)}/>
    }
}

이벤트 호출 시 화살표 함수 사용

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.submit = this.submit.bind(this);
    }
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}

Constructor

바인드 사용

class Component1 extends React.Component{
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit.bind(this)}/>
    }
}

이벤트 호출 시 바인드 사용

class Component1 extends React.Component{
    submit(e, n){
        console.log(this, n)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={(e) => this.submit(e, 100)}/>
    }
}

이벤트를 통해 매개변수 전달

이벤트 호출 시 화살표 함수 사용

    submit(n, e){
        console.log(n)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit.bind(this, 20)}/>
    }
}

이벤트 호출 시 바인드 사용

rrreee

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

반응에서 선택한 li을 강조 표시하는 단계에 대한 자세한 설명

JS에서 인터페이스를 사용하는 단계에 대한 자세한 설명🎜🎜🎜

위 내용은 React의 컴포넌트 이벤트 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!