react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)

#课程目标

理解因为react的单向数据流
理解表单组件会因为react数据流变的不好维护
理解受控组件与非受控组件的实质区别
理解受控组件在实际项目中的运用场景
利用受控组件完成一个表单控件的封装

#知识点

react单向数据流

数据主要从父节点传递到子节点(通过props)如果顶层（父级）的某个props改变了，React会重渲染所有的子节点。
props => 不可以使用this.props直接修改props，因为props是只读的，props是用于整个组件树中传递数据和配置。
state => 每个组件都有属于自己的state，state和props的区别在于前者(state)只存在于组件内部，只能从当前组件调用this.setState修改state值(不可以直接修改this.state！)。

表单元素

表单元素有其特殊之处，用户可以通过键盘输入与鼠标选择，改变界面的显示。界面的改变也意味着有一些数据被改动，比较明显的是input的value，textarea的innerHTML，radio/checkbox的checked。

非受控组件
3-1. 如果一个表单组件没有value props(单选按钮和复选按钮对应的是 checked props)时,就可以称为非受控组件;
3-2.使用defaultValue和defaultChecked来表示组件的默认状态;
3-3.通过 defaultValue和defaultChecked来设置组件的默认值,它仅会被渲染一次,在后续的渲染时并不起作用

import React, { Component } from 'react';class UnControlledInput extends Component { handleSubmit = (e) => { console.log(e); e.preventDefault(); console.log(this.name.value); } render() { return ( <form onSubmit={this.handleSubmit}> <input type="text" ref={i => this.name = i} defaultValue="BeiJing" /> <button type="submit">Submit</button> </form> ); } }export default UnControlledInput;

受控组件

从React的思路来讲，肯定是想让数据控制一切，或者简单的理解为，页面的生成与更新得忠实地执行JSX的指令，如果说：

<input value={this.state.value} />

当input.value是由组件的state.value拍出来的，当用户进行输入修改后，然后JSX再次重刷视图，这时input.value是采取用户的新值还是state的新值？基于这个分歧，React给出一个折衷的方案，两者都支持，于是就产生了今天的受控组件了。
React认为value/checked不能单独存在，需要与onInput/onChange/disabed/readOnly等控制value/checked的属性或事件一起使用。它们共同构成受控组件，受控是受JSX的控制。如果用户没有写这些额外的属性与事件，那么框架内部会给它添加一些事件，如onClick, onInput, onChange，阻止你进行输入或选择，让你无法修改它的值。

/* 受控组件 1. React是一个单向数据流 2. 但可以自定义双向数据流组件(受控组件) */ /* 功能: 自定义组件, 功能如下 1. 界面如页面所示 2. 初始数据显示为renyl 3. 输入数据时, 下面的数据同步变化 */ class ControlInput extends React.Component{ constructor(props){ super(props); this.state = { msg:'renyl' } this.handleChange = this.handleChange.bind(this); } // 通过事件的形式控制存储状态 handleChange(event){ debugger; console.log(event.target.value); this.setState({ msg:event.target.value }); } render () { let {msg} = this.state; return ( <div> <input onChange={this.handleChange} type="text" value={msg}/> <p>{msg}</p> </div> ) } } ReactDOM.render(<ControlInput />,document.getElementById("example"));