参见: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. 20171017数据处理sql

    SELECT LEFT(RIGHT(进场时间,8),2), 车牌号,进场时间,支付时间 FROM 停车收费详情$;1是周日,7是周六SELECT COUNT(*),周几 FROM date_parts ...

  2. Nuget安装包

    Selenium.WebDriver Selenium.WebDriver.ChromeDriver Selenium.Firefox.WebDriver Selenium.WebDriver.IED ...

  3. Codeforces Round #544 (Div. 3)解题报告

    A.Middle of the Contest 考虑把输入的时间单位化成分钟,相加除以2就好了 #include<bits/stdc++.h> using namespace std; # ...

  4. js注意点:数组比较大小方法及数组与对象的区别

    (迁移自旧博客2017-04-19) 快速复制数组及数组比较大小方法 首先介绍一下复制数组的方法: var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var ...

  5. IIS简单的反向代理设置

    下载IIS扩展 1.URL Rewrite 地址: https://www.iis.net/downloads/microsoft/url-rewrite 2.Application Request ...

  6. 【python 3】 列表方法操作汇总

    基础数据类型 : list list主要操作:索引.切片.查询.修改.增加.删除.扩展.统计.排序.获取下标.拷贝…… 1.1  索引  由图: list正向下标从0开始 list反向下标从-1开始 ...

  7. 【MVC】ASP.NET MVC之数据验证

    前端传到后端数据的不可信任性,DRY("Don't Repeat Yourself") 设计原则.MVC3.0出了后端数据验证特性,鼓励你只定义一次功能或行为,然后在应用程序中各处 ...

  8. python3学习笔记

    之前一直使用python2.7,最近打算学习下python3教程,再此记录下一些要点(未完待续...) 1.缩进 缩进有利有弊.好处是强迫你写出格式化的代码,但没有规定缩进是几个空格还是Tab.按照约 ...

  9. 算法笔记--Splay && Link-Cut-Tree

    Splay 参考:https://tiger0132.blog.luogu.org/slay-notes 普通模板: ; ], val[N], cnt[N], fa[N], sz[N], lazy[N ...

  10. 8.5 GOF设计模式四: 观察者模式Observer

    GOF设计模式四: 观察者模式Observer  现实中遇到的问题  当有许多不同的客户都对同一数据源感兴趣,对相同的数据有不同的处理方式,该如 何解决?5.1 定义: 观察者模式  观察者模式 ...