理解受控组件和非受控组件

受控组件

在HTML表单元素中，输入类的DOM，随着用户的输入，通过onChange事件和setState，将数据维护到state中，在需要时，从state中获取数据的组件，被称为受控组件

官方推荐表单尽量使用受控组件

受控组件类似于Vue中双向绑定的作用

class Login extends React.Component{state = {username:'',password:'' }//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}handleSubmit = (event)=>{// 通过state获取数据const {username,password} = this.statealert(`你输入的用户名是：${username},你输入的密码是：${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input onChange={this.saveUsername} type="text" name="username"/>密码：<input onChange={this.savePassword} type="password" name="password"/><button>登录</button></form>)}
}

非受控组件

与受控组件相对的，如果仅仅想要获取某个表单元素的值，并不关心他是如何改变的，可以通过获取DOM节点的方式来取值，通常使用ref，这种不依赖于state，现用现取的组件被称为非受控组件。

class Login extends React.Component{handleSubmit = (event)=>{// 通过ref获取数据，现用现取const {username,password} = thisalert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名：<input ref={c => this.username = c} type="text" name="username"/>密码：<input ref={c => this.password = c} type="password" name="password"/><button>登录</button></form>)}
}

理解受控组件和非受控组件相关推荐

什么是React受控组件和非受控组件
React是一个非常流行的JavaScript库,用于构建Web应用程序.React中有两种类型的组件,受控组件和非受控组件.在本文中,我们将深入研究这两种组件的区别,优缺点以及如何选择适当的组件类型 ...
React 入门：受控组件与非受控组件
文章目录非受控组件概念介绍示例代码受控组件什么是受控组件示例代码代码优化首先说明,我们基于表单数据的处理方式来理解受控组件与非受控组件. 非受控组件概念介绍非受控组件中,表单数据将 ...
[react] 受控组件和非受控组件有什么区别？
[react] 受控组件和非受控组件有什么区别? 受控组件用value和组件的state绑定,当value更新时,会自动更新state 非受控组件没有value,采用ref直接操作dom 个人简介我 ...
深入react技术栈(10):受控组件和非受控组件
我是歌谣放弃很容易但是坚持一定很酷微信公众号关注前端小歌谣受控组件非受控组件受控组件和非受控组件的区别文章参考深入React技术栈
受控组件和非受控组件
受控组件和非受控组件 React的受控组件与非受控组件的概念是相对于表单而言的,在React中表单元素通常会持有一下内部的state,因此它的工作方式与其他HTML元素不一样,而获取表单元素内部sta ...
React中受控组件和非受控组件
受控组件在React中,每当表单的状态发生变化时,都会被写入到组件的state中,这种组件在React被称为受控组件.受控组件中,组件渲染的状态与它的value或者checked相对应.React通 ...
React 之受控组件和非受控组件
在React中,所谓受控组件和非受控组件,是针对表单而言的. 表单受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修改会实 ...
React-表单处理（受控组件，非受控组件）
受控组件: value值受到了react状态控制的表单元素 React中将state中的数据与表单元素的value值绑定到了一起,由state的值来控制表单元素的值非受控组件: 非受控组件借助于re ...
React---什么是受控组件、非受控组件
受控组件: 在随后的用户输入中,能够控制表单中输入元素的组件被称为受控组件,即每个状态更改都有一个相关联的处理程序. 例如,我们使用下面的 handleChange 函数将输入框的值转换成大写: ha ...
【React】之受控组件和非受控组件
React中的组件根据是否受React控制可分为受控的和非受控的. 一.受控组件表单元素依赖于状态,表单元素需要默认值实时映射到状态的时候,就是受控组件,这个和双向绑定相似. 受控组件,表单元素的修 ...

理解受控组件和非受控组件

受控组件

非受控组件

理解受控组件和非受控组件相关推荐

最新文章

热门文章