前言

受控组件有俩种不同的定义：

狭义上我们关注于表单的受控与非受控
而广义上我们将面向全局探讨受控与非受控，也就是React组件的渲染是否被调用者传递的 props 完全控制，控制则为受控组件，否则是非受控组件

表单中的非受控组件

import React, { Component } from 'react';export default class App extends Component {loginRef = React.createRef();render() {return (<section><h1>表单中的非受控组件</h1><form action="#">{/* 非受控组件行为 */}{/* <input type="text" ref={this.loginRef} value="Hello" /> */}{/* 因为这是JSX文本，不是原本的DOM文档，所以这个value值相当于传给input标签一个value值，写死的值 */}<input type="text" ref={this.loginRef} defaultValue="Hello" />{/* defaultValue代表只是代表第一次初始化value值，不去控制后续的更新， 脱离了react的控制 ，直接通过组件的原生DOM节点获取设置value值*/}<br /><buttononClick={() => {console.log(this.loginRef.current.value);}}>Login</button><buttononClick={() => {this.loginRef.current.value = '';}}>重置</button></form></section>);}
}// 什么是非受控组件？
/* React要编写一个非受控组件，可以使用ref来从DOM节点中获取表单数据，就是非受控组件 */

这是一个我已经写完的组件了（从受控表单组件到非受控表单组件的演变），并且之前的 ’错误‘ 注释我并没有删除，我们来看看最初时我们是怎么写这个表单的，我们其实就是想给表单设置一个初始默认值value，原生这样写是完全没有问题的，但是放到 React 中我们发现如果你使用 value 属性来定义默认初始值的话会产生一个奇妙的严重的问题：用户根本无法更改你定义的初始值，这是为什么呢？

React - 受控组件与非受控组件（实践妙用-模糊查询）相关推荐

[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...
React的受控组件和非受控组件
一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实时映射到状态值上,此时就可以对输入的内容进行校验. 受控组件只 ...
【React】知识点归纳：受控组件与非受控组件区别
React: 受控组件与非受控组件区别受控组件示范代码: 原理图: 非受控组件示范代码: 结论受控组件在HTML中,标签<input>.<textarea>.< ...
什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
React 的受控组件和非受控组件有什么不同
大家好,我是前端西瓜哥,今天我们来看看 React 的受控组件和非受控组件有什么不同. 受控组件受控组件,指的是将表单元素的值交给组件的 state 来保存. 例子: import './style ...

React - 受控组件与非受控组件（实践妙用-模糊查询）

文章目录

前言

表单中的非受控组件

React - 受控组件与非受控组件（实践妙用-模糊查询）相关推荐

最新文章

热门文章