React双向数据绑定原理---受控组件

受控组件：React将state与表单元素的值value绑定到一起

代码：(多表单组件单一写法)
每个要绑定的元素都要写一遍onChange事件，比较繁琐

import React from 'react';
// class类组件（有状态组件）
class World extends React.Component {state = {text: '',//input绑定的值textarea: '',//textarea绑定的值city: 'bj',//多选框的的值checked: false//复选框}iptHandle = (e) => {this.setState({text: e.target.value})}areaChange = e => {this.setState({textarea: e.target.value})}cityChange = e => {this.setState({city: e.target.value})}checkChange = e => {console.log(e);this.setState({checked: e.target.checked})console.log(this.state.checked);}render() {return (<div><input type='text' value={this.state.text} onChange={this.iptHandle} /><br /><textarea value={this.state.text} onChange={this.areaChange} /><br /><select value={this.state.city} onChange={this.cityChange}><option value='sh'>上海</option><option value='bj'>北京</option></select><input type='checkbox' checked={this.state.checked} onChange={this.checkChange} /></div>)}
}
export default World

优化：
1.给表单元素添加name属性，名称与state相同；
2，根据表单元素获取对应的值；
3.在chang事件处理程序中通过[name]来修改对应的state

handelChange = (e) => {const value = e.target.type === 'checkbox' ? e.target.checked : e.target.valueconst name = e.target.namethis.setState({[name]: value})}
render() {return (<div><input name='text' type='text' value={this.state.text} onChange={this.handelChange } /><input name='textarea' type='checkbox' checked={this.state.checked} onChange={this.handelChange } /></div>)}//注意name的值要与state绑定的值相同

非受控组件：通过ref，使用元素DOM方式来获取表单元素的值。
使用步骤：
1，调用React.createRef()方法创建一个ref对象

constructor() {super()this.textRef=React.createRef()}}

2,将创建好的Ref对象添加到文本框中

<input type='text' ref={this.textRef} />

3.通过ref对象获取到文本框的值,current不能掉

console.log(this.textRef.current.value)

React双向数据绑定原理---受控组件相关推荐

React阶段 - React双向数据绑定原理
React双向数据绑定原理如果已经学过Vue,并且深入了解过Vue的双向数据绑定的话,就会明白 Vue 2.0 双向数据绑定的核心其实是通过Object.defineProperty来实现数据劫持和 ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
Vue2和Vue3的双向数据绑定原理
目录前言: vue2.x 是如何实现响应式系统的: defineProperty 的痛点: Object.defineProperty 代码的使用 Proxy 方法的理解 Proxy 代码的使用: ...
Vue数据响应式与双向数据绑定原理区分
很多小伙伴搞不清楚数据响应式与双向数据绑定这两个原理,还有人自然的认为它们两者是相同的,接下来我们来看看它们二者的区分吧! 数据响应式是Vue的核心特性之一,而双向数据绑定是通过指令或修饰符实现的一种 ...
vue的v-model的双向数据绑定原理
vue的双向数据绑定是一个很有意思的特性:知道其原理方能运用自如 <div id="demo"><h1>双向绑定机制</h1><!--表单 ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
vue双向数据绑定原理分析--Mr.Ember
vue双向数据绑定原理分析摘要 vue常用,但原理常常不理解,下面我们来具体分析下vue的双向数据绑定原理. (1)创建一个vue对象,实现一个数据监听器observer,对所有数据对象属性进行监听 ...
[react] react中什么是受控组件？
[react] react中什么是受控组件? 表单元素的value/checked值与state绑定,同时表单元素的onChange可以动态的改变对应的state的值,即数据的变更可以更新视图,用户操 ...
双向数据绑定原理(三种实现方式)
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>双向数 ...

React双向数据绑定原理---受控组件

React双向数据绑定原理---受控组件相关推荐

最新文章

热门文章