参见:https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

非受控:

onSubmit = ()=>{
const val = this._input.value;
} <input ref={input =>this._input=input}>

  

受控:value prop

选择

1、若form简单,值可以一次性在提交时候检索或验证,则优先使用非受控,简单

2、实时验证、异步表单数据、组合验证等,需要实时使用表单中的值,则使用受控组件

react 表单受控和非受控的更多相关文章

  1. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  2. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

  3. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  4. Vue 中的受控与非受控组件

    Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...

  5. 受控组件 & 非受控组件

    在 React 中表单组件可分为两类,受控与非受控组件. 一. 受控组件 设置了 value 的 <input> 是一个受控组件. 对于受控的 <input>,渲染出来的 HT ...

  6. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  7. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  8. 浅谈React受控与非受控组件

    背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...

  9. React学习之受控和非受控组件

    受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...

随机推荐

  1. Bigger-Mai 养成计划,Python基础巩固二

    模块初识1.标准库2.第三方库import sys sys.path #自己的本文件名不可为sys.py#输出模块存储的环境变量sys.argv #打印脚本的相对路径sys.argv[2] #取第二个 ...

  2. 【codeforces 242E】XOR on Segment

    [原题题面]传送门 [题面翻译]传送门 [解题思路] 操作涉及到区间求和和区间异或,考虑到异或操作,我们对每个数二进制分解. 把每一位单独提出来做,异或要么取反要么变为不变,对于每一位建一颗线段树,那 ...

  3. pytest-xdist分布式执行测试用例

    前言 平常我们手工测试用例非常多时,比如有1千条用例,假设每个用例执行需要1分钟.如果一个测试人员执行需要1000分钟才能执行完,当项目非常紧急的时候,我们会用测试人力成本换取时间成本,这个时候多找个 ...

  4. Hadoop之运行环境搭建

    一.虚拟机环境准备 1.克隆虚拟机 2.修改克隆虚拟机静态IP 3.修改主机名 4.关闭防火墙 5.创建hadoop用户 6.配置hadoop用户具有root权限 7.在/opt 目录下创建文件夹 1 ...

  5. Python3中urllib模块的使用

    转载自:https://www.cnblogs.com/php-linux/p/8365941.html 1.基本方法 urllib.request.urlopen(url, data=None, [ ...

  6. http协议详解及htt面试题目,常见的http状态码

    http协议详解及htt面试题目,常见的http状态码 HTTP报文是面向文本的,报文中的每一个字段都是一些ASCII码串,各个字段的长度是不确定的.HTTP有两类报文:请求报文和响应报文. HTTP ...

  7. vlog.hpp

    //vov #ifndef VLOG_HPP #define VLOG_HPP #include <sys/time.h> #include <unistd.h> #ifnde ...

  8. java native用法

    说明: native关键字说明其修饰的方法是一个原生态方法,方法对应的实现不是在当前文件,而是在用其他语言(如C和C++)实现的文件中.Java语言本身不能对操作系统底层进行访问和操作,但是可以通过J ...

  9. DPDK kni创建要先于port开启

    DPDK kni创建要先于port开启 1. DPDK kni创建使用API:- rte_kni_init- rte_kni_alloc 2. DPDK port开启使用API:- rte_eth_d ...

  10. OO-第一单元总结

    经过了前三次作业和两次实验的引导,我的编程思路在逐步从面向过程转向面向对象.也对面向对象有了初步的理解.虽然第一次实验由于自己没有及时完成导致没有提交过有些遗憾,但是第二次实验还是提交了几次的(虽然由 ...