반응에서 클릭 이벤트를 작성하는 방법

React에서 클릭 이벤트를 작성하는 방법: 1. 바인드 바인딩을 사용합니다. 코드는 [this.clicked.bind(this, "hello world")]입니다. 2. 화살표 기능을 사용합니다. 코드는 [onClick={(event)입니다. )= >this.clicked("hello].

이 튜토리얼의 운영 환경: windows7 시스템, React16 버전, 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

React 클릭 이벤트 작성 방법 :

1 , 바인딩 바인딩

첫 번째 매개변수는 기본적으로 마지막 매개변수를 가리킵니다. this，第二个参数开始才是事件函数接收到的参数，事件对象event

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked.bind(this,"hello world")}>点击</button>
        </React.Fragment>
    )
}
...

이 바인딩은 균일하게 작성될 수 있으므로 코드가 더 깔끔하게 보입니다.

...
constructor(props){
    super(props);
    this.state = {};
    this.checkMenu = this.checkMenu.bind(this);
}
clicked = (param)=>{
    return (event)=>{
        console.log(event.target.value); // 按钮
        console.log(param); // hello
    }
}
render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={this.clicked(&#39;hello&#39;)}>点击</button>
        </React.Fragment>
    )
}
...

2. arrow. 함수가 이벤트 객체 이벤트를 전달하려면 이벤트를 화살표 함수의 트리거된 이벤트에 매개변수로 전달해야 합니다.

...
clicked(param,event){
    console.log(param) //hello world
    console.log(event.target.value) //按钮
}
render(){
    return (
        <React.Fragment>
            <button value="按钮" onClick={(event)=>this.clicked("hello world",event)}>点击</button>
        </React.Fragment>
    )
}
...

관련 무료 학습 권장사항:

JavaScript

(동영상)

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