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

2024-10-18 19:00:17

一、事件处理

1.1 React事件

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

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

<button onClick={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->handleClick}>Button</button>

而不是：

<button onClick="handleClick()">Button</button>

1.2 事件对象

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class MyInput extends React.Component {
        constructor(props) {
          super(props);
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          console.log(event);
          console.log(event.target);
        }
        render() {
          return (
            <div>
              <span>Input:</span>
              <input type="text" onChange={this.handleChange} />
            </div>
          );
        }
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

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

1.3 事件传参

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

<input type="text" onChange={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->this.handleChange(1)} />

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

<input type="text" onChange={() => 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就指向的是实例对象了

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>EventObject</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      function MyInput() {
        function handleChange(event, id) {
          console.log(event.target.value);
          console.log(id);
        }
        return (
          <div>
            <span>Input:</span>
            <input type="text" onChange={() => handleChange(event, "id")} />
          </div>
        );
      }
      ReactDOM.render(<MyInput />, document.getElementById("app"));
    </script>
  </body>
</html>

二、表单

双向绑定

在vue中，可以使用v-model指令实现表单的双向绑定，但是实际上，v-model只是v-bind和v-on的语法糖，在react中，我们可以直接利用属性和属性改变的处理事件实现双向绑定的功能。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Form</title>
    <script src="https://cdn.staticfile.org/react/16.8.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.8.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      class HelloMessage extends React.Component {
        constructor(props) {
          super(props);
          this.state = { value: "Hello React!" };
          this.handleChange = this.handleChange.bind(this);
        }
        handleChange(event) {
          this.setState({ value: event.target.value });
        }
        render() {
          let value = this.state.value;
          return (
            <div>
              <input type="text" value={value} onChange={this.handleChange} />
              <h4>{value}</h4>
            </div>
          );
        }
      }
      ReactDOM.render(<HelloMessage />, document.getElementById("app"));
    </script>
  </body>
</html>

到此这篇关于React事件处理和表单的绑定详解的文章就介绍到这了,更多相关React事件处理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

React表单容器的通用解决方案

目录 1. 前话 2. 正文 2.1 表单容器定义 2.2 表单容器定义实现 2.3 表单容器呈现实现 2.3.1 弹窗表单容器 2.3.1 抽屉表单容器 2.4 表单容器用例 3. 最后 1. 前话提问:ToB中台类系统的后端开发主要做啥? ‍♂️:CRUD 再次提问:那前端开发呢? ‍♂️:增删查改开个玩笑哈啊哈哈哈虽然没有具体数据统计,但作者仍主观地认为中台类的系统的前端内容至少一半都是增删查改
React实现复杂搜索表单的展开收起功能

给时间时间,让过去过去. 上节我们写过了[搜索]表单,以及查询.重置功能.本节对于需要展开收起效果的查询表单进行概述,主要涉及前端样式知识. 样式效果如下: 思路:在Search组件中定义两个组件renderAdvancedForm,renderSimpleForm,其中renderSimpleForm中只有五个查询选项,而在renderAdvancedForm包含所有的搜索选项.点击'展开''收起'按钮调用onClick={toggleForm}切换form显示样式即可. 1. 写rende
react中事件处理与柯里化的实现

目录 1. 事件处理阻止默认行为合成事件 2. 柯里化柯里化的目的一个简单的例子 1. 事件处理 React 中元素也可接受.处理事件,但是在语法上有一点不同. 在React 中所有事件的命名采用的是小驼峰,而非原生 DOM 的纯小写,所有事件需要我们传入一个函数,而非字符串. 例如: const Button = () => { const handleClick = () => { console.log('click') } return <button onClick={
React学习笔记之事件处理（二）

之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而
react 表单数据形式配置化设计

目录前言实现一般实现配置化的实现实现思路具体实现使用示例总结前言在日常的中后台系统开发中,表单是和我们打交道非常多的名词.但是在一般的表单实现中.我们会做着很多重复的工作,不停在写 FormItem...,以及为组件加上“请输入/请选择”等无脑的 placeholder 文本和“请输入xx/请选择xx”等必填提示.其次表单一般都存在编辑页和详情页,而为了代码更好的维护性通常会将编辑和详情用一套代码实现.此时我们的代码里就会出现“isEdit ? 表单组件 : 纯文本”这样无脑
React的事件处理你了解吗

目录一.React的事件处理 1.与DOM事件处理的不同之处 (1)React事件的命名方式:小驼峰方式,DOM的命名方式是小写 (2)事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值 (3)阻止默认事件的方式不同 2.React中事件处理函数的定义 (1)使用ES6的箭头数 (2)在构造函数中进行绑定:将事件处理函数作为类的成员函数 (3)在render函数中绑定this (4)React中事件处理函数 (5)注意事项 3.事件处理中的参数传递 (1)直接传递参数 (2)在定义UI控
React事件处理的机制及原理

React中的事件处理在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式.例如onclick要写成onClick,onchange要写成onChange等. (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式.例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在R
react实现动态表单

本文实例为大家分享了react实现动态表单的具体代码,供大家参考,具体内容如下 1.小要求在工作中,我们也会碰到这样子的需求:在填写信息的时候,可以填写多个人名.多个需求.以及动态生产一个分组.今天我们就以: 可以动态的添加/删除人名.路径以及可以添加/删除一个分组的需求来开始今天的学习之旅.需求如下图所示: 2.技术点分析 1.数据结构2.react+antd 动态编辑表格数据提及的知识点3.js操作数据的方法: 添加数据.根据下标删除数据 3.代码分析 3.1 数据结构分析 /** *
React事件处理和表单的绑定详解

目录一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理二.表单一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:
Angular表单验证实例详解

表单验证我去,我感觉我这个人其实还是一个很傻逼的一个人,老是因为拼错了一个单词或者怎么样就浪费我很长时间,这样真的不行不行,要正确对待这个问题,好了,说正题吧,angular也有表单验证minlength,maxlength,required呀这些个东西,还有也支持h5的那些验证,h5的那些验证,就是type啦,type='email',number,url呀这些,然后现在要用angular来验证,可以定义样式哈,不错,然后怎么验证呢,好的上代码 <!DOCTYPE html> <ht
SpringMVC实现表单验证功能详解

本章节内容很丰富,主要有基本的表单操作,数据的格式化,数据的校验,以及提示信息的国际化等实用技能. 首先看效果图项目结构图接下来用代码重点学习SpringMVC的表单操作,数据格式化,数据校验以及错误提示信息国际化.请读者将重点放在UserController.java,User.java,input.jsp三个文件中. maven 项目必不可少的pom.xml文件.里面有该功能需要的所有jar包. <?xml version="1.0" encoding="UTF
Angular4表单验证代码详解

背景: 最近在itoo页面调整的时候,发现页面表单或者是文本框没有做基本的判断操作,所以着手demo一篇,希望对大家有帮助!! -------------------------------------------------------------------------------- 1.创建表单组件: ng g c login1 2.1单规则验证: <label>用户名:</label> <input type="text" #userNameRe
BootStrap智能表单实战系列(八)表单配置json详解

本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数量来自动使用不同的栅格, '1,2,2,4':使用指定的栅格来布局,如果配置的列数不足的情况将使用第一项(n,n 为一项) 2.hides的配置项 hides:[{id:'xxx',value:''}] 此项是可选的,主要用于编辑时存放一些不可见的列(如主键ID的值) 3.eles 表单元素的配置(
Spring Boot 2 Thymeleaf服务器端表单验证实现详解

这篇文章主要介绍了Spring Boot 2 Thymeleaf服务器端表单验证实现详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下表单验证分为前端验证和服务器端验证. 服务器端验证方面,Java提供了主要用于数据验证的JSR 303规范,而Hibernate Validator实现了JSR 303规范. 项目依赖加入spring-boot-starter-thymeleaf时,默认就会加入Hibernate Validator的依赖. 开
PHP实现动态表单生成工具详解

目录 Form介绍特点项目主页链接安装方法快速使用链式操作创建块表单数组配置创建块表单行内表单 table表单表单包含多种input类型,包括 hiiden类型 ,text类型,radio类型,checkbox类型,textarea类型,file类型,select类型等基础类型,手写表单就是累耗时耗力开发销量太低而且代码量大了还容易写出bug,每个页面的表单遇到改动的时候恨不得长十双手去改,于是我自己开发了一个php写的表单生成工具,在业务逻辑通过配置或者链式操作去初始表单结构和
AngularJs表单验证实例详解

常用的表单验证指令 1. 必填项验证某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码代码如下: <input type="text" required /> 2. 最小长度验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码代码如下: <input type="text" ng-minlength="
SpringMVC表单标签知识点详解

本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MVC表单表单标签的使用有一个大致的印象,然后再结合例子对各个标签介绍一下如何使用. 1.首先,在com.demo.web.models包中添加一个模型TagsModel内容如下: package com.demo.web.models; import java.util.List; import ja
AngularJS表单提交实例详解

本文实例讲述了AngularJS表单提交.分享给大家供大家参考,具体如下: AngularJS中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的. ng-app属性声明所有被其包含的内容都属于这个AngularJS应用,这也是我们可以在Web应用中嵌套AngularJS应用的原因.只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS影响. 当AngularJS认为某个值可能发生变化时,它会运行