So schreiben Sie ein Klickereignis in React-js-Tutorial-php.cn

So schreiben Sie ein Klickereignis in React

coldplay.xixi

Freigeben： 2020-11-30 17:17:53

Original

3785 Leute haben es durchsucht

So schreiben Sie Klickereignisse in React: 1. Verwenden Sie die Bindungsbindung, der Code lautet [this.clicked.bind(this, „hello world“)] 2. Verwenden Sie die Pfeilfunktion, der Code lautet [onClick={(event.); )= >this.clicked("hello].

So schreiben Sie ein Klickereignis in React

Die Betriebsumgebung dieses Tutorials: Windows7-System, React16-Version, diese Methode ist für alle Computermarken geeignet.

React-Methode zum Schreiben von Klickereignissen :

1, Bindung binden

Der erste Parameter zeigt standardmäßig auf den letzten Parameter 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>
    )
}
...

Nach dem Login kopieren

Die Bindung kann einheitlich geschrieben werden, sodass der Code übersichtlicher aussieht

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

Nach dem Login kopieren

arrow. Wenn die Funktion das Ereignisobjektereignis übergeben möchte, muss sie das Ereignis als Parameter an das ausgelöste Ereignis in der Pfeilfunktion übergeben.

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

Nach dem Login kopieren

Verwandte kostenlose Lernempfehlungen:

JavaScript

(Video)
.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie ein Klickereignis in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!