IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> React第五天学习 -> 正文阅读

[JavaScript知识库]React第五天学习

react 表单

表单事件

在 React 里,HTML 表单元素的工作方式和其他的 DOM 元素有些不同,这是因为表单元素通常会保持一些内部的 state。
react表单中 如果对表单元素添加了value 这个时候想要去修改表单里边数据的时候
我们需要在表单元素的上边添加一个onChange事件

如果不添加Change事件就会出现一下情况
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

报错内容为:失败的属性类型:您为表单字段提供了一个’value’属性,但没有’onChange’处理程序。这将呈现只读字段。如果字段应该是可变的,请使用“defaultValue”。否则,请设置“onChange”或“readOnly”。

没有onChange事件否则当前的表单元素是一个只读(你只能看 不能改)状态

下面我们开始对其增加事件
== 事件绑定==
1、onClick={this.方法名.bind(this)}
** 如果你确实需要使用bind形式传递我们的参数**
可以这么写
{this.方法名.bind(this,要传递的参数)} 要传递的参数可以使任意的数据类型
2、onClick={()=> this.方法名()}
如果使用es箭头函数进行表单元素的绑定时候 我们需要传递一个事件参数
onChange={(e)=>this.方法名(e)}
我们同时需要在 方法中 接受一个event形参
并且通过event.target.value来获取表单里边的数据
方法名(event) {
console.log(event.target.value) //获取到表单里边的数据
}

第一种方法----------------onClick={this.方法名.bind(this)}
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
所以我们需要在this.state中定义一个变量value,并在input标签的value属性进行插值使其等于this.state.value(简单概括为双向绑定)
当然还需要在onChange事件中进行this.setState()方法中进行实时监听

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实现传递值
在这里插入图片描述
在这里插入图片描述

第二种方法-------------------------------------onChange={(e)=>this.方法名(e)}
在这里插入图片描述
在这里插入图片描述
传值需要传入一个event
在这里插入图片描述
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-16 11:38:44  更:2021-08-16 11:38:48 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/26 17:34:52-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计