解讀react的onClick自動(dòng)觸發(fā)等相關(guān)問(wèn)題

更新時(shí)間：2023年02月12日 14:39:53 作者：猜測(cè)7

這篇文章主要介紹了解讀react的onClick自動(dòng)觸發(fā)等相關(guān)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

react的onClick自動(dòng)觸發(fā)等問(wèn)題

react分頁(yè)組件遇到的問(wèn)題：

? private getFirst() {
? ? const { pageNo } = this.state;
? ? if (pageNo > 3) {
? ? ? return (<span onClick={this.changePage(1)}>首頁(yè)</span>);
? ? } else {
? ? ? return;
? ? }
? }
? private changePage (index: number) {
? ? this.setState({ pageNo: index });
? }

這段代碼的onClick直接報(bào)錯(cuò)：不能將類型“void”分配給類型“((event: MouseEvent<HTMLSpanElement>) => void) | undefined”，這個(gè)報(bào)錯(cuò)看得我莫名其妙……

同事告訴我要給changePage函數(shù)加個(gè)return ()=>{}形成閉包。其實(shí)后來(lái)我才發(fā)現(xiàn)，雖然changePage寫(xiě)得很像function，但其只是一個(gè)變量而已，所以并不滿足onClick的內(nèi)容是方法的情況。

? private getFirst() {
? ? const { pageNo } = this.state;
? ? if (pageNo > 3) {
? ? ? return (<span onClick={this.changePage(1)}>首頁(yè)</span>);
? ? } else {
? ? ? return;
? ? }
? }
?
? private changePage (index: number) {
? ? return () => {this.setState({ pageNo: index });}
? }

這樣寫(xiě)雖然不報(bào)錯(cuò)，但有個(gè)嚴(yán)重的問(wèn)題，每次生成UI時(shí)它都會(huì)自動(dòng)觸發(fā)onClick，這個(gè)機(jī)制真是？？？……所以最后改成了：

? private getFirst() {
? ? const { pageNo } = this.state;
? ? if (pageNo > 3) {
? ? ? return (<span onClick={()=>this.changePage(1)}>首頁(yè)</span>);
? ? } else {
? ? ? return;
? ? }
? }
? private changePage (index: number) {
? ? this.setState({ pageNo: index });
? }

再補(bǔ)充一個(gè)使用的例子：

import React from 'react';
?
interface Iprops {
? name: string;
? click: any;
}
?
const ButtonItem = (props: Iprops) => {
? return <div onClick={props.click}>{props.name}</div>
}
?
const ContentMenu: React.FC<{}> = () => {
? const product = (type: number) => {
? ? return () => {
? ? ? alert(type);
? ? }
? }
?
? return (
? ? <div>
? ? ? <ButtonItem name="生成1" click={product(1)} />
? ? </div>
? );
};
?
export default ContentMenu;

react的onClick事件調(diào)用的各種寫(xiě)法與觸發(fā)情況

handleClick 是普通函數(shù)

  handleClick(params?: any) {
    console.log('1000101010101010100');
    console.log(params);
    console.log(this)
  }

  onClick={this.handleClick}
    // 正確，但是無(wú)法傳值
  onClick={this.handleClick()}
    // 在handleClick(): any，即聲明返回值any 時(shí)，不需要 this.handleClick = this.handleClick.bind(this)，似乎能正確使用，能獲取到 this；
    // 在handleClick() 不設(shè)置 : any 時(shí)，不管是否增加 this.handleClick = this.handleClick.bind(this)，都是報(bào)錯(cuò)，界面無(wú)法顯示。
  onClick={this.handleClick.bind(this, 12)}
    // 正確，不需要 this.handleClick = this.handleClick.bind(this)，能獲取this，能獲取參數(shù)。
  onClick={() => this.handleClick}
    // 無(wú)效且無(wú)報(bào)錯(cuò)，即無(wú)法觸發(fā)
  onClick={() => { this.handleClick }}
    // 無(wú)效且無(wú)報(bào)錯(cuò)，即無(wú)法觸發(fā)
  onClick={() => this.handleClick()}
    // 正確，不需要 this.handleClick = this.handleClick.bind(this)，能獲取this，能獲取參數(shù)。
  onClick={() => { this.handleClick() }}
    // 正確，能獲取this，能獲取參數(shù)。

handleClick 是箭頭函數(shù)

PS：箭頭函數(shù)皆不需要 this.handleClick = this.handleClick.bind(this)：

  handleClick = (params?: any) => {
    console.log('1000101010101010100');
    console.log(params);
    console.log(this)
  }

  onClick={this.handleClick}
    // 正確，但是無(wú)法傳值
  onClick={this.handleClick()}
    // 在handleClick(): any，即聲明返回值any 時(shí)，頁(yè)面渲染時(shí)，自動(dòng)觸發(fā)onClick，且onClick點(diǎn)擊失效；
    // 在handleClick() 不設(shè)置 : any 時(shí)，報(bào)錯(cuò)，界面無(wú)法顯示。
  onClick={() => this.handleClick}
    // 無(wú)效且無(wú)報(bào)錯(cuò)，即無(wú)法觸發(fā)
  onClick={() => { this.handleClick }}
    // 無(wú)效且無(wú)報(bào)錯(cuò)，即無(wú)法觸發(fā)
  onClick={() => this.handleClick()}
    // 正確，能獲取this，能獲取參數(shù)。
  onClick={() => { this.handleClick() }}
    // 正確，能獲取this，能獲取參數(shù)。