受控和非受控组件
当提起这个时,一般都是与表单相互联系的,在HTML中,表单元素,例如:input、textarea、select之类的表单元素通常会自己维护数据并根据用户的输入进行更新,但是在react中,数据通常会被保存在组件内部的state属性中并且只能通过使用setState来更新数据,这也就使得react的state成为唯一的数据源。
受控组件:
import React, { PureComponent } from 'react';
export default class App extends PureComponent {
constructor(props) {
super(props);
this.state = {
username: ""
}
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户:
{/* 受控组件 */}
<input type="text"
id="username"
onChange={e => this.handleChange(e)}
value={this.state.username}/>
</label>
<input type="submit" value="提交"/>
</form>
</div>
)
}
handleSubmit(event) {
//先阻止掉form表单对于数据的默认提交
event.preventDefault();
console.log(this.state.username);
}
handleChange(event) {
//监听用户输入并将数据保存在react组件内部的state中以后更改数据时只能通过setState从而保证数据的唯一性
this.setState({
username: event.target.value
})
}
}
非受控组件:
需要注意的是react官方推荐使用受控组件来处理表单数据,因为受控组件中的表单数据是由react组件自己内部来进行统一管理的。另一种替代方案便是使用非受控组件,这时是通过ref操作DOM节点拿到表单数据的,如果要使用非受控组件中的数据,那么我们需要使用ref来从DOM节点中获取表单数据。
import React, { PureComponent, createRef } from 'react'
export default class App extends PureComponent {
constructor(props) {
super(props);
this.usernameRef = createRef();
}
render() {
return (
<div>
<form onSubmit={e => this.handleSubmit(e)}>
<label htmlFor="username">
用户:
<input type="text" id="username" ref={this.usernameRef}/>
</label>
<input type="submit" value="提交"/>
</form>
</div>
)
}
handleSubmit(event) {
event.preventDefault();
console.log(this.usernameRef.current.value);//获取表单数据并保存在组件内部state中
}
}