React 受控组件和非受控组件

文章目录

React 受控组件和非受控组件
- 受控组件
- 非受控组件
拓展：什么是***event*.target**

受控组件

在React中，可变的状态通常保存在组件的state属性中，而且只能使用**setState()**修改

受控组件行为全过程：当用户将数据输入到受控组件时，会触发修改状态的事件处理器，这时由你的代码来决定此输入是否有效（如果有效就使用更新后的值重新渲染）。如果不重新渲染，则表单元素将保持不变。

受控组件中要有**onChange()**方法

等同于vue中的双向绑定

代码展示

<body>
<!--    准备一个容器  --><div id="test"></div><!--    引入react核心库--><script type="text/javascript" src="../js/react.development.js"></script>
<!--引入reactdom，用于支持reavt操作dom--><script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--    引入babel，用于将jsx转化为js--><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel"> //创建组件class Login extends React.Component {//初始化状态state = {username:'',//用户名password:''//密码}//表单提交的回调handleSubmit=()=> {event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`用户名：${username}密码:${password}`)}//保存用户名到状态中saveUsername=(event)=> {console.log(event.target.value);this.setState({username:event.target.value})}//保存到密码到状态中savePassword=(event)=> {console.log(event.target.value);this.setState({password:event.target.value})}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>)}}ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>

非受控组件

非受控组件不需要写事件处理函数，由DOM自身进行维护。

一般通过Ref进行DOM的绑定，即使用ref 来从 DOM 节点中获取表单数据

代码展示

<body>
<!--    准备一个容器  --><div id="test"></div><!--    引入react核心库--><script type="text/javascript" src="../js/react.development.js"></script>
<!--引入reactdom，用于支持reavt操作dom--><script type="text/javascript" src="../js/react-dom.development.js"></script>
<!--    引入babel，用于将jsx转化为js--><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel"> //创建组件class Login extends React.Component {handleSubmit=()=> {event.preventDefault() //阻止表单提交const {username,password} = thisalert(`用户名：${username.value}密码:${password.value}`)}render (){return(<form action="http://www.baidu.com" 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>)}}ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>

拓展：什么是event.target

简单解释：event.target是发生事件的元素或触发事件的元素

代码展示

            //保存到密码到状态中savePassword=(event)=> {console.log(event.target.value);//此时当密码产生或者发生变换即可打印出密码的值this.setState({password:event.target.value})}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>)}

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——非受控组件和非受控组件的应用
非受控组件和非受控组件的应用什么是非受控组件: 非受控组件:它应用的次数没有受控组件多,在工作中,多数使用为受控组件非受控组件:表单项中的value或checked值,它不受state中的属性控制 ...

React 受控组件和非受控组件（总结）

React 受控组件和非受控组件

文章目录

受控组件

非受控组件

拓展：什么是event.target

React 受控组件和非受控组件（总结）相关推荐

最新文章

热门文章