参见: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. 【转】java线上程序排错经验2 - 线程堆栈分析

    前言 在线上的程序中,我们可能经常会碰到程序卡死或者执行很慢的情况,这时候我们希望知道是代码哪里的问题,我们或许迫切希望得到代码运行到哪里了,是哪一步很慢,是否是进入了死循环,或者是否哪一段代码有问题 ...

  2. JS高程关于ajax的学习笔记

    1.ajax介绍 ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面,就可以从服务器中获取需要的数据. ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR对象为向服 ...

  3. LaTex 使用特殊章节符号 (§)

    参考: LaTex 使用特殊章节符号 (§) LaTex 使用特殊章节符号 (§) 在.tex文件开头,加上以下内容: \usepackage[utf8]{inputenc} \usepackage{ ...

  4. VirtualBox中安装CentOS 7_Linux

    准备条件 在自己真实机上已经安装了VirtualBox虚拟机,具体安装方法可以参考Linux公社的文章. 下载CentOS-7的镜像 1. 在虚拟机中创建虚拟电脑 如图点击新建按钮,开始新建虚拟机电脑 ...

  5. zabbix服务器与客户端(Linux+Windows)的搭建

    zabbix监控搭建 一.搭建LNMP环境(MySQL) 创建数据库以及授权zabbix账户 mysql> create database zabbix character set utf8; ...

  6. 拿取页面值 跟拿取value里面的值

    拿取页面输入框的数值 使用  val() val()设置或返回表单字段的值 拿取value里面的数值 value(); attr() 获取属性值

  7. aop(权限控制)

    创建sysContext (管理请求) package com.tp.soft.common.util; import javax.servlet.http.HttpServletRequest; i ...

  8. ubuntu使用抓包工具,charles

    参考官网:https://www.charlesproxy.com/documentation/installation/apt-repository/ wget -q -O - https://ww ...

  9. bs4 FeatureNotFound: Couldn't find a tree builder with the features you requested: lxml. Do you need to install a parser library?

    安装beautifulsoup后,运行测试报错 from urllib import requestfrom bs4 import BeautifulSoup url = "http://w ...

  10. 函数嵌套定义,闭包及闭包的应用场景,装饰器,global.nonlocal关键字

    函数的嵌套定义 在一个函数的内部定义另一个函数 为什么要有函数的嵌套定义: 1)函数fn2想直接使用fn1函数的局部变量,可以将fn2直接定义到fn1的内部,这样fn2就可以直接访问fn1的变凉了 2 ...