您现在的位置是：网站首页> 编程资料编程资料

React事件处理和表单的绑定详解_React_

2023-05-24 348人已围观

简介 React事件处理和表单的绑定详解_React_

一、事件处理

1.1 React事件

React 元素的事件处理和 DOM 元素类似。但是有一点语法上的不同:

React 事件绑定属性的命名采用驼峰式写法，而不是小写。例如onclick属性应该写成onClick。
如果采用 JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)。例如已经定义了一个名为handleClick的函数，应该这样调用：

而不是：

1.2 事件对象

在事件发生时调用的函数，默认是自带一个参数的，这个参数通常被命名为event，就是事件对象。

例如，我们为一个input输入框的onchange事件设置一个函数，获取事件对象。

EventObject

可以看到，event.target就是触发事件的dom元素。

1.3 事件传参

除了自带的默认参数（事件对象）外，有时候我们需要额外传递传输给事件处理的函数，这个时候不能直接调用函数并传参，例如下面的用法是错误的：

正确的用法应该是使用匿名函数来实现传参：

 this.handleChange(event, "id")}/>

此时处理函数handleChange:

handleChange(event, id) { console.log(event.target.value); console.log(id); }

第一个参数一定是事件对象，后面的参数名称随意，但是顺序必须一一对应。

1.4 函数组件事件处理

通过上面的例子不难看出，class组件有一个非常麻烦的点在于必须在构造函数中声明并绑定方法的this:

右边中的this：这个this是在构造器方法中的，所以它的指向是组件的实例对象；

右边handleChange方法：这个方法是在类的原型对象上的；而使用bind的函数把这个原型对象方法上的this修改成类实例对象上的this，右边的代码执行完成之后生成一个新的函数，然后把这个新函数放到实例的自身上也就是等式的左边，且给这个函数起了一个名字（左边方法名），这样就能解决原型方法上其他方法调用该方法this指向是undefined的问题了。此时其他方法调用该函数时this就指向的是实例对象了

而函数式组件中，就简单了许多：