1、受控组件

在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
state：唯一数据源
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
示例：

2、Textarea标签

在 HTML 中, 元素通过其子元素定义其文本

在 React 中，使用 value 属性代替示例：

3、Select标签

在 HTML 中，创建下拉列表标签

React 在根 select 标签上使用 value 属性单选示例：

多选示例：

4、文件 input 标签

因为它的 value 只读，所以它是 React 中的一个非受控组件

5、处理多个输入

当需要处理多个 input 元素时，我们可以给每个元素添加 name 属性，并让处理函数根据 event.target.name 的值选择要执行的操作。
示例：

使用了 ES6 计算属性名称的语法更新给定输入名称对应的 state 值

6、受控输入空值

在受控组件上指定 value 的 prop 会阻止用户更改输入。如果你指定了 value，但输入仍可编辑，则可能是你意外地将value 设置为 undefined 或 null。
示例：

7、受控组件的替代品

使用非受控组件, 这是实现输入表单的另一种方式。

8、成熟的解决方案

包含验证、追踪访问字段以及处理表单提交的完整解决方案，使用 Formik 是不错的选择

关联文章：

React笔记——核心概念：1.Hello World

React笔记——核心概念：2.JSX简介

React笔记——核心概念：3.元素渲染

React笔记——核心概念：4.组件&Props

React笔记——核心概念：5.State&生命周期

React笔记——核心概念：6.事件处理

React笔记——核心概念：7.条件渲染

React笔记——核心概念：8.列表&Key

使用react实现select_React笔记——核心概念：9.表单相关推荐

redux-form V.7.4.2学习笔记（六）表单同步校验技术
一.客户端同步校验支持 redux-form V.7.4.2提供了两种方法可以为表单提供同步客户端校验支持. 第一种是为整个redux-form提供校验函数,该函数接受一个以表单中所有值组成的对象作为 ...
springSecurity的学习笔记--使用spring-Security完成表单登陆，手机验证码登陆，第三方登陆
环境搭建好后,之后的练习进入了一个十分痛苦的阶段!! 但是与此同时,收获也是比较可观的. 老师通过详细的视频讲解,完成了表单登陆,包括账号密码和验证码登陆,手机验证码登陆,第三方登陆. 每一个部分都进 ...
SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC--数据绑定及表单标签理解数据绑定为什么要使用数据绑定基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...
JavaScript自学笔记（1）---表单验证，let和const,JSON文件
今天开个JS自学笔记,本身JS的语法很简单,如果学过Java或者C系的都很容易,就不讨论了.主要是讨论实际应用的问题. 1.表单验证: a.html自动验证: HTML 表单验证可以通过浏览器来自动完 ...
react中使用非受控组件获取表单元素的值
class Hello extends React.Component{constructor(){super() 利用react提供的React.createRef()this.ref=React. ...
ray-tune 笔记核心概念
1 ray-tune 整体流程在搜索空间(search space)中定义要调整的超参数 -->将它们传递到指定要tune的目标的可训练对象中(trainable) -->选择一种搜索算 ...
react 封装表格组件_React--封装的表单组件
var Form = React.createClass({ getInitialState(){ return { uname:'', upass:'' } }, login(e){ e.preve ...
Java笔记-使用BindingResult把表单错误传出来
目录基本概念演示及代码基本概念这里在特别是在提交表单数据的数据很常见,当提交的数据不完整的时候,也要回Json,并且把错误代码发出来,这里就的使用 BindingResult. 演示及代码正 ...
HTML 自学笔记（HTML框架+表单设计）
HTML框架什么是框架:将浏览器划分成不同部分,每一部分加载不同的网页,用以实现在同一浏览器窗口中加载多个页面的效果. <frameset> 划分框架标记. 语法格式:<frame ...

使用react实现select_React笔记——核心概念：9.表单

1、受控组件

2、Textarea标签

3、Select标签

4、文件 input 标签

5、处理多个输入

6、受控输入空值

7、受控组件的替代品

8、成熟的解决方案

关联文章：

使用react实现select_React笔记——核心概念：9.表单相关推荐

最新文章

热门文章