解讀react的onClick自動觸發(fā)等相關問題

更新時間：2023年02月12日 14:39:53 作者：猜測7

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

react的onClick自動觸發(fā)等問題

react分頁組件遇到的問題：

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

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

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

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

這樣寫雖然不報錯，但有個嚴重的問題，每次生成UI時它都會自動觸發(fā)onClick，這個機制真是？？？……所以最后改成了：

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

再補充一個使用的例子：

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事件調用的各種寫法與觸發(fā)情況

handleClick 是普通函數

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

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

handleClick 是箭頭函數

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

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

  onClick={this.handleClick}
    // 正確，但是無法傳值
  onClick={this.handleClick()}
    // 在handleClick(): any，即聲明返回值any 時，頁面渲染時，自動觸發(fā)onClick，且onClick點擊失效；
    // 在handleClick() 不設置 : any 時，報錯，界面無法顯示。
  onClick={() => this.handleClick}
    // 無效且無報錯，即無法觸發(fā)
  onClick={() => { this.handleClick }}
    // 無效且無報錯，即無法觸發(fā)
  onClick={() => this.handleClick()}
    // 正確，能獲取this，能獲取參數。
  onClick={() => { this.handleClick() }}
    // 正確，能獲取this，能獲取參數。