React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > react onClick自动触发问题

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

作者:猜测7

这篇文章主要介绍了解读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,能获取参数。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文