반응으로 이벤트 객체를 전달하는 방법

반응에서 이벤트 객체를 전달하는 방법: 1. "{(e) => this.deleteRow(id, e)}"를 사용하여 전달합니다. 2. "{this.deleteRow.bind(this, id)}를 전달합니다. " " 메소드가 전달됩니다.

이 튜토리얼의 운영 환경: windows7 시스템, React17.0.1 버전, Dell G3 컴퓨터.

권장: "Basic JavaScript Tutorial"

매개변수(이벤트 객체)를 이벤트 핸들러에 전달

추가 매개변수를 함수에 전달: 다음 두 가지 방법

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

위의 두 가지 방법은 각각 동일합니다. 화살표 함수와 Function.prototype.bind를 통해.

위 두 예제에서는 React 이벤트 객체인 e 매개변수가 두 번째 매개변수로 전달됩니다. 화살표 함수를 통해 이벤트 개체를 명시적으로 전달해야 하지만 바인드를 통해 이벤트 개체와 더 많은 매개변수가 암시적으로 전달됩니다.

bind 메소드를 통해 청취 함수에 매개변수를 전달할 때, 클래스 구성요소에 정의된 청취 함수, 이벤트 객체 e는 전달된 매개변수 뒤에 순위가 지정되어야 한다는 점에 유의할 가치가 있습니다. 예:

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={
                this.preventPop.bind(this,this.state.name)
                }>Click</a>
            </div>
        );
    }
}

더 많은 프로그래밍을 위해- 관련 지식이 있으신 분들은 :프로그래밍 배우기를 방문해주세요! !

위 내용은 반응으로 이벤트 객체를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!