【React系列】受控非受控组件
本文来自#React系列教程：https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg5MDAzNzkwNA==&action=getalbum&album_id=1566025152667107329)
一. refs 的使用
在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作：
- 管理焦点，文本选择或媒体播放。
- 触发强制动画。
- 集成第三方 DOM 库。
1.1. 创建 ref 的方式
如何创建refs来获取对应的DOM呢？目前有三种方式：
- 方式一：传入字符串
- 使用时通过
this.refs.传入的字符串格式获取对应的元素；
- 使用时通过
- 方式二：传入一个对象
- 对象是通过
React.createRef()方式创建出来的； - 使用时获取到创建的对象其中有一个
current属性就是对应的元素；
- 对象是通过
- 方式三：传入一个函数
- 该函数会在DOM被挂载时进行回调，这个函数会传入一个 元素对象，我们可以自己保存；
- 使用时，直接拿到之前保存的元素对象即可；
代码演练：
import React, { PureComponent, createRef } from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props);
this.titleRef = createRef();
this.titleEl = null;
}
render() {
return (
<div>
<h2 ref="title">String Ref</h2>
<h2 ref={this.titleRef}>Hello Create Ref</h2>
<h2 ref={element => this.titleEl = element}>Callback Ref</h2>
<button onClick={e => this.changeText()}>改变文本</button>
</div>
)
}
changeText() {
this.refs.title.innerHTML = "你好啊,李银河";
this.titleRef.current.innerHTML = "你好啊,李银河";
this.titleEl.innerHTML = "你好啊,李银河";
}
}
1.2. ref 节点的类型
ref 的值根据节点的类型而有所不同：
- 当
ref属性用于 HTML 元素时，构造函数中使用React.createRef()创建的ref接收底层 DOM 元素作为其current属性； - 当
ref属性用于自定义class组件时，ref对象接收组件的挂载实例作为其current属性； - 你不能在函数组件上使用
ref属性，因为他们没有实例；
这里我们演示一下ref引用一个class组件对象：
import React, { PureComponent, createRef } from 'react';
class Counter extends PureComponent {
constructor(props) {
super(props);
this.state = {
counter: 0
}
}
render() {
return (
<div>
<h2>当前计数: {this.state.counter}</h2>
<button onClick={e => this.increment()}>+1</button>
</div>
)
}
increment() {
this.setState({
counter: this.state.counter + 1
})
}
}
export default class App extends PureComponent {
constructor(props) {
super(props);
this.counterRef = createRef();
}
render() {
return (
<div>
<Counter ref={this.counterRef}/>
<button onClick={e => this.increment()}>app +1</button>
</div>
)
}
increment() {
this.counterRef.current.increment();
}
}
函数式组件是没有实例的，所以无法通过ref获取他们的实例：
- 但是某些时候，我们可能想要获取函数式组件中的某个DOM元素；
- 这个时候我们可以通过
React.forwardRef，后面我们也会学习hooks中如何使用ref；
1.3 ref 转发
import React, { PureComponent, createRef } from 'react';
function Home(props) {
return (
<div>
<h2 ref={props.ref}>Home</h2>
<button>按钮</button>
</div>
)
}
export default class App extends PureComponent {
constructor(props) {
super(props);
this.homeTitleRef = createRef();
}
render() {
return (
<div>
<Home ref={this.homeTitleRef}/>
<button onClick={e => this.printInfo()}>打印ref</button>
</div>
)
}
printInfo() {
console.log(this.homeTitleRef);
}
}
使用forwardRef
import React, { PureComponent, createRef, forwardRef } from 'react';
const Home = forwardRef(function(props, ref) {
return (
<div>
<h2 ref={ref}>Home</h2>
<button>按钮</button>
</div>
)
})
export default class App extends PureComponent {
constructor(props) {
super(props);
this.homeTitleRef = createRef();
}
render() {
return (
<div>
<Home ref={this.homeTitleRef}/>
<button onClick={e => this.printInfo()}>打印ref</button>
</div>
)
}
printInfo() {
console.log(this.homeTitleRef.current);
}
}
二. 受控组件
2.1. 认识受控组件
2.1.1. 默认提交表单方式
在React中，HTML表单的处理方式和普通的DOM元素不太一样：表单元素通常会保存在一些内部的state。
比如下面的HTML表单元素：
<form>
<label>
名字:
<input type="text" name="name" />
label>
<input type="submit" value="提交" />
form>
- 这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面；
- 在React中，并没有禁止这个行为，它依然是有效的；
- 但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据；
- 实现这种效果的标准方式是使用“受控组件”；
2.1.2. 受控组件提交表单
在 HTML 中，表单元素（如、