react项目，如何编写按钮事件的绑定代码？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

.bind()()

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

• https://newsn.net/say/js-call.html
• https://newsn.net/say/js-apply.html
• https://newsn.net/say/js-bind.html

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

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

测试代码，类组件

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

• https://newsn.net/say/react-state.html

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>
        )
    }
}

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

测试代码，函数组件

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

• https://newsn.net/say/react-usestate.html

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;

表格总结

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

题外话

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

<button onclick="javascript:test(1)">测试</button>
<script>
    function test(a){
        alert(a);
    }
</script>

html里面的写法和react里面的写法区别是很大的....，特别是onclick的写法，都是小写字母。react里面的写法是onClick。

相关文章

• https://newsn.net/say/js-call.html
• https://newsn.net/say/js-apply.html
• https://newsn.net/say/js-bind.html
• https://newsn.net/say/react-state.html
• https://newsn.net/say/react-usestate.html

结束语

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

• https://newsn.net/tag/react/

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