我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

写了这么多.call()、.apply()和.bind()()的文章了，现在就来看一下react里面如何编写按钮事件的绑定代码。思路也非常简单，就是利用.bind()来实现事件的绑定。本文代码非常简单，react高手请飘过。

苏南大叔：react项目，如何编写按钮事件的绑定代码？ - react-按钮事件
react项目，如何编写按钮事件的绑定代码？（图3-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文分为函数式组件和类式组件两个，来描述react中按钮事件的绑定。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

.bind()()

稍稍回顾一下前文，分别是：

本文需要引用一下上述文章的结论：

  • .bind()返回的是个函数。
  • .bind()的第一个参数可以覆盖this引用，其余参数依次放在后面的两个括号的任何一个括号里面。

测试代码，类组件

类组件里面设置state的参考文章：

import React, { Component, useRef } from 'react'
export default class Child extends Component {
    constructor(props) {
        super(props);
        this.state = { val: 0 };
    }
    setData() {
        this.setState((state) => {
            return { val: state.val + 1 }
        });
    }
    setData2(a) {
        this.setState((state) => {
            return { val: state.val + 1 + a }
        });
    }
    setData3() {
        console.log(Date.now());
    }
    setData4(a) {
        console.log(Date.now() + " " + a);
    }
    render() {
        return (
            <div>
                {this.state.val}
                <button onClick={this.setData.bind(this)}>修改数据</button>
                <button onClick={this.setData2.bind(this,2)}>修改数据</button>
                <button onClick={this.setData3.bind()}>修改数据2</button>
                {/* <button onClick={this.setData3()}>错误的方式</button> */}
                <button onClick={this.setData3}>修改数据3</button>
                <button onClick={this.setData4.bind(null,"aaa")}>修改数据4</button>
            </div>
        )
    }
}
JavaScript

这里共使用了5种写法，分别是：

写法this推荐
this.setData.bind(this)改写推荐
this.setData.bind(this,args)改写推荐
this.setData2.bind()没改写不推荐
this.setData2()不涉及错误的写法，不推荐
this.setData2不涉及逻辑中不涉及this.的话，可以执行，但是不推荐
this.setData3.bind(null,"a")占位而已逻辑中不涉及this.的话，可以用null占位

苏南大叔：react项目，如何编写按钮事件的绑定代码？ - bind-1
react项目，如何编写按钮事件的绑定代码？（图3-2）

测试代码，函数组件

函数式组件里面使用state的文章：

import { useState} from "react";

function Child() {
  const [val, setVal] = useState("默认值")
  const setData = () => {
    setVal(Date.now())
  }
  const setData2 = (a) => {
    setVal(Date.now()+""+a)
  }
  return (
    <div className="Child">
      {val}
      <button onClick={setData}>修改状态</button>
      <button onClick={setData2.bind(null,"aaa")}>修改状态2</button>
    </div>
  );
}
export default Child;
JavaScript
写法this推荐
setData不涉及推荐，但是没办法传参数
setData2.bind(null,"a")是不是改写没意义想传参数的话，就需要传递一个没有意义的null改写

苏南大叔：react项目，如何编写按钮事件的绑定代码？ - bind-2
react项目，如何编写按钮事件的绑定代码？（图3-3）

表格总结

不管是类式组件还是函数式组件，都要明确的是需要{函数}，而不是需要{函数()}。

代码写法组件类型说明
函数名函数式组件
函数名()函数式组件函数被执行了, 除非返回的是个函数
函数名.bind()函数式组件这个函数体里面，不能需要参数
函数名.bind(null,args)函数式组件可以传递参数
this.函数名类式组件
this.函数名()类式组件函数被执行了, 除非返回的是个函数
this.函数名.bind()类式组件不能写this.，不能需要参数
this.函数名.bind(this)类式组件可以写this.，不可以传递参数
this.函数名.bind(this,args)类式组件可以写this.，可以传递参数

题外话

如果是普通的html按钮的话，很可能执行的代码是：

<button onclick="javascript:test(1)">测试</button>
<script>
    function test(a){
        alert(a);
    }
</script>
HTML
html里面的写法和react里面的写法区别是很大的....，特别是onclick的写法，都是小写字母。react里面的写法是onClick。

相关文章

结束语

更多react相关经验文章，请点击苏南大叔的系列文章链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react