参见: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. line-height的高度机理

    1.元素高度从何而来?是由里面的文字撑开的? <!DOCTYPE html> <html lang="en"> <head> <meta ...

  2. HTML5滚动加载

    @using YoSoft.DSM.YoDSMModel;@using YoSoft.DSM.YoDSMBLL;@{ Layout = "~/Views/Shared/_LayoutComp ...

  3. ASP.NET MVC WebAPI Put和Delete请求出现405(Method not allowed)错误

    解决办法: 在站点根目录下的web.config设置如下(主要参考添加项): <system.webServer> <modules> <remove name=&quo ...

  4. 小程序使用阿里巴巴TTF字体文件以及图标

    转话地址https://transfonter.org 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索 ...

  5. Zookeeper初始(一)

    量大,服务器压力大.需要用到分布式,集群. 问题1:三台机器,一个请求如何落到一台机器上?如何协调工作 问题2:集群如何选取leader? 问题3:既然是分布式,集群,一个请求只能有一台机器接接收并处 ...

  6. box-sizing的用法(笔记)

    关于盒子布局的box-sizing的使用 border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距.这是当文档处于 Quirks模式 时Internet Expl ...

  7. Intel收购半导体设计公司eASIC

    来源:本文由公众号 半导体行业观察(ID:icbank)翻译自「anandtech」,谢谢. 北京时间今天凌晨,Intel宣布收购了半导体设计公司eASIC. eASIC的商业模式介于传统Fables ...

  8. java之JVM(一)

    内存模型: Java内存模型建立在自动内存管理的概念之上.当一个对象不再被一个应用所引用,垃圾回收器就会回收它,从而释放相应的内存. JVM从底层操作系统中分配内存,并将它们分为以下几个区域: 方法区 ...

  9. VUE基本常识

    1.运行vue项目  项目根目录git Bash here npm run dev 为了能直接打开项目  配置项目package.json   添加--open  如下图: 2.坑:VUE初写小项目问 ...

  10. ZJOI2019Day1AFO记

    先去看了看T3,发现暴力DP就是n^3的,于是不妨先写一个,写完n^3就9:30多了..有点慌去看看T1,太鬼畜了,还是先写个n=5压压惊...写了一年,在11:00写完并检查(?)了n=5.然后去看 ...