第十一单元(受控组件和非受控组件-实现类似于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} />
1
- 当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"));
-
受控组件的总结
5-1.可以通过初始state中设置表单的默认值;
5-2.每当表单的值发生变化时,调用onChange事件处理器;
5-3.事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state.
5-4.setState触发视图的重新渲染,完成表单组件值得更新
#授课思路
#案例和作业
- 高度还原页面
- 利用受控组件实现整体业务
