React的非受控组件和受控组件

1.非受控组件
2.受控组件
3、对比受控组件和非受控组件的输入流程：

1.非受控组件

1.在虚拟DOM节点上标识一个ref属性，并且将创建好的引用(dom节点)赋值给这个ref属性
2.react会自动将输入框中输入的值放在实例的ref属性上


// 只是不受组件控制// 创造组件class Text extends React.Component{login(event){event.preventDefault() // 组织默认事件const {username ,password} = this // 结构赋值} render(){const element = (<div id={"from"}><div>用户名: <input type="text" name="username" ref={c => this.username = c} /></div><div>密码: <input type="text" name="password" ref={c => this.password = c} /></div><div><input type="button" value="登录" /></div></div>)return element}}ReactDOM.render(<Text></Text>,document.getElementById('root'))

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。

2.受控组件

1.表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件，这个和双向绑定相似.
2.受控组件，表单元素的修改会实时映射到状态值上，此时就可以对输入的内容进行校验.
3.受控组件只有继承React.Component才会有状态.
4.受控组件必须要在表单上使用onChange事件来绑定对应的事件.

  // 通过 onChange 事件，边输入边通过 setState 修改状态/*当想要获取表单的一些内部状态时,就可以将表单的内部状态和组件的状态进行绑定 这样就形成了受控组件受控组件: 当我们想要 组件state状态机 和 表单空间的 state 一致时，就可以使用 受控组件，当我们想要给表单，设置value属性或者checked时，React 就会认为我们要实现一个受控组件，这时必须给控件加 onChange 处理 onChange 再把 控件的状态同步给组件非受控组件: 我们不需要同步 value 值 ，使用：(defaultValue,defaultChecked)*/class Text extends React.Component{constructor(props){super(props) // 实例化组件this.state = {}}saveDate = (dataType,event) => {this.setState({[dataType]:event.target.value})}login = (event) => {event.preventDefault() // 阻止表单提交}render(){return (<div><form onSubmit={this.login}>用户名:<input type="text" placeholder="你输入账号" name='username' onChange={event => this.saveDate('username',event)}/>密码:<input type="text" placeholder="请输入密码" name='password' onChange={event => this.saveDate('password',event)}/><br/><input type="submit" value='登录'/>    </form><h1>用户名：{this.state.username ? this.state.username : '暂无用户'} </h1><h1>密码： {this.state.password ? this.state.password : '空'}</h1></div>) }}ReactDOM.render(<Text></Text>,document.getElementById('root'))

3、对比受控组件和非受控组件的输入流程：

1.非受控组件：用户输入的内容 => input 中显示用户输入的内容
2,受控组件：用户输入的内容 => 触发onChange事件 => 设置 state状态username/password = 的内容 => 渲染input使他的value变成用户输入的内容

React的非受控组件和受控组件相关推荐

15、react 的非受控组件和受控组件
react 的非受控组件和受控组件组件分为非受控组件和受控组件,这两种有什么区别呢,单说概念不好理解,那我们通过一个案例来说明一下,一下子就可以弄懂了,很简单的. 案例还是,以案例的方 ...
react基础入门，类组件和函数组件，state，props，refs
React入门目录 React入门 React入门 Vue跟React的异同点相同点不同点 Vue小建议 1. 不需要响应式的数据应该怎么处理? 2. Key 3. 数据结构 React 教程 ...
谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
谈谈我对前端组件化中"组件"的理解,顺带写个Vue与React的demo 前言前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的 ...
React 类组件和函数组件
React 类组件和函数组件目录 1.类组件和函数组件 2.如何使用 props 和 state 3.如何绑定事件 4.复习 this+ 两个面试题组件component 一.概念 Element ...
React组件库Concis | 组件突破50+,移动端concis起步,新增英语文档,持续更新中...
您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~ Concis是什么? 首先,感谢大家的支持,让Concis突破了100star~也是有你们的不断支持,让博主在开源路 ...
Semantic-UI的React实现（四）：基本元素组件的共通处理（父类）实现
上一篇(Semantic-UI的React实现(三):基本元素组件)已经提到过,基本元素组件的实现因为没有复杂的交互,仅仅是CSS类的编辑和组装,因此实现原理相对比较简单. 但简单的东西要想做的简洁, ...
React 中高阶函数与高阶组件（上）
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
React子组件给父组件传值，父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo:实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图:效果图如下: 父组件代码: 代码解析: ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...

React的非受控组件和受控组件

React的非受控组件和受控组件

1.非受控组件

2.受控组件

3、对比受控组件和非受控组件的输入流程：

React的非受控组件和受控组件相关推荐

最新文章

热门文章