React受控和非受控组件
认识受控组件
在React中，HTML表单的处理方式和普通的DOM元素不太一样:表单元素通常会保存在一些内部的state。
比如下面的HTML表单元素:
这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;
在React中，并没有禁止这个行为，它依然是有效的;
但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;
实现这种效果的标准方式是使用“受控组件”;
export class App extends PureComponent {
constructor() {
super()
this.state = {
username: ""
}
}
handleSubmitClick(event) {
// 1.阻止默认行为, 防止提交页面刷新
event.preventDefault()
// 2.获取到表单的数据
console.log(this.state.username)
// 3.之后就可以发送网络请求提交到服务器
}
changeUsername(event) {
this.setState({
username: event.target.value
})
}
render() {
const {
username } = this.state
return (
<div>
<form onSubmit={
e => this.handleSubmitClick(e)}>
<label htmlFor="username">
用户:
<input
type="text"
name=""
id="username"
value={
username}
onChange={
e => this.changeUsername(e)}
/>
</label>
<button type='submit'>提交按钮</button>
</form>
</div>
)
}
}
受控组件演练
input文本框
- 在 HTML 中，表单元素(如<input>、 <textarea> 和 <select>)之类的表单元素通常自己维护 state，并根据用户输入进行更新。
- 而在 React 中，可变状态(mutable state)通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。
我们将两者结合起来，使React的state成为“唯一数据源”;
渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;
被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”;
由于在表单元素上设置了 value 属性，因此显示的值将始终为 this.state.inputValue，这使得 React 的 state 成为唯一数据源。
由于 inputChange 在每次按键时都会执行并更新 React 的 state，因此显示的值将随着用户输入而更新。
export class App extends PureComponent {
constructor() {
super()
this.state = {
inputValue: "abcd"
}
}
inputChange(event) {
this.setState({
inputValue: event.target.value
})
}
render() {
const {
inputValue } = this.state
return (
<div>
<input type="text" value={
inputValue} onChange={
e => this.inputChange(e)}/>
</div>
)
}
}
checkbox标签
texteare标签和input比较相似:
export class App extends PureComponent {
constructor() {
super()
this.state = {
isAgree: false
}
}
handleSubmitClick(event) {
// 1.阻止默认行为, 防止提交页面刷新
event.preventDefault()
// 2.获取到表单的数据
console.log(this.state.isAgree)
// 3.之后就可以发送网络请求提交到服务器
}
inputChange(event) {
this.setState({
isAgree: event.target.checked
})
}
render() {
const {
isAgree } = this.state
return (
<div>
<form onSubmit={
e => this.handleSubmitClick(e)}>
<label htmlFor="agree">
{
/* 复选框绑定checked */}
<input
id="agree"
type="checkbox"
checked={
isAgree}
onChange={
e => this.inputChange(e)}
/>
同意协议
</label>
<div>
<button type='submit'>提交按钮</button>
</div>
</form>
</div>
)
}
}
select标签
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。
export class App extends PureComponent {
constructor() {
super()
this.state = {
fruit: "apple"
}
}
handleSubmitClick(event) {
// 1.阻止默认行为, 防止提交页面刷新
event.preventDefault()
// 2.获取到表单的数据
console.log(this.state.fruit)
// 3.之后就可以发送网络请求提交到服务器
}
changeSelect(event) {
this.setState({
fruit: event.target.value
})
}
render() {
const {
fruit } = this.state
return (
<div>
<form onSubmit={
e => this.handleSubmitClick(e)}>
<select value={
fruit} onChange={
e => this.changeSelect(e)}>
<option value="apple">苹果</option>
<option value="orgin">橙子</option>
<option value="banana">香蕉</option>
</select>
<div>
<button type='submit'>提交按钮</button>
</div>
</form>
</div>
)
}
}
认识非受控组件(了解)
React推荐大多数情况下使用 受控组件 来处理表单数据:
一个受控组件中，表单数据是由 React 组件来管理的
另一种替代方案是使用非受控组件，这时表单数据将
交由DOM节点来处理;
如果要使用非受控组件中的数据，那么我们需要使用 ref 来从DOM节点中获取表单数据。
我们来进行一个简单的演练:
使用ref来获取input元素;
在非受控组件中通常使用
defaultValue来设置默认值;同样，<input type=“checkbox”> 和 <input type=“radio”> 支持
defaultChecked，<select> 和 <textarea> 支持 defaultValue。
export class App extends PureComponent {
constructor() {
super()
this.state = {
name: "chenyq"
}
this.nameRef = createRef()
}
handleSubmitClick(event) {
// 1.阻止默认行为, 防止提交页面刷新
event.preventDefault()
// 2.非受控组件获取值
console.log(this.nameRef.current.value)
// 3.之后就可以发送网络请求提交到服务器
}
componentDidMount() {
// 再通过原生的方式监听变化, 不建议, 非受控组件还是在操作DOM
// this.nameRef.current.addEventListener
}
render() {
const {
name } = this.state
return (
<div>
<input type="text" defaultValue={
name} ref={
this.nameRef} />
<div>
<button type='submit'>提交按钮</button>
</div>
</form>
</div>
)
}
}