解读react的onClick自动触发等相关问题

目录react的onClick自动触发等问题react的onClick事件调用的各种写法与触发情况handleClick是普通函数handleClick是箭头函数总结react的onClick自动...

目录

react的onClick自动触发等问题

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 ()=>{}形成闭包。其实后来我才发现，虽然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时它都会自动触发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事件调用的各种写法与触发情况

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}
    // 无效且无报错，即无法触发
  onClick={() => { this.handleClick }}
    // 无效且无报错，即无法触发
  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 时，页面渲染时，自动触发onClick，且onClick点击失效；
    // 在handleClick() 不设置 : any 时，报错，界面无法显示。
  onClick={() => this.handleClick}
    // 无效且无报错，即无法触发
  onClick={() => { this.handleClick }}
    // 无效且无报错，即无法触发
  onClick={() => this.handleClick()}
    // 正确，能获取this，能获取参数。
  onClick={() => { this.handleClick() }}
    // 正确，能获取this，能获取参数。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。