React受控和非受控组件(表单双向绑定)

什么叫受控和非受控组件，最后再说，我们先用React来实现一个表单的双向绑定，类似Vue里面的v-model,只不过v-model类似一个语法糖而已

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} name="username"> </input> </label> <button onClick={e=>this.handleSubmit}>提交</button> </form> </div> ) } handleSubmit(event){ //取消默认行为 event.preventDefault() console.log(this.state.fruits) } handleChange(event){ this.setState({ //计算属性名 [event.target.name]:event.target.value }) } }

效果如上。成功，但是有个地方得特别强调一下

[event.target.name]:event.target.value

假如我们不这样写的话，那么我们每写一个表单框，我们就得加一个 handleChange点击事件，有10个表单我们就得写10个这样的事件，但是我们给每个表单绑定一个name得话，就像这样

<input name="text"/>

之后我们不论写多少个表单框，只需要这一个handleChange事件即可

我们再来做一个select框的双向绑定

export default class App extends PureComponent { constructor(props){ super(props); this.state ={ fruits:'orange' //默认选中 } } render() { return ( <div> <form onSubmit={e=>this.handleSubmit(e)}> <select name="fruits" onChange={e=>this.handleChange(e)} value={this.state.fruits}> <option value="apple">苹果</option> <option value="banana">香蕉</option> <option value="orange">橘子</option> </select> <button onClick={e=>this.handleSubmit}>select提交</button> </form> </div> ) } handleSubmit(event){ //取消默认行为 event.preventDefault() console.log(this.state.fruits) } handleChange(event){ this.setState({ //计算属性名 [event.target.name]:event.target.value }) } }

下面可以解释一下受控组件了，我们上面写的就是受控组件，我们这个表单的双向绑定是怎么实现的呢？

其实是先监听输入框发生变化,根据改变的值，用setState把值赋给username,然后再把username的值赋到value，是一个这样的过程

下面再演示一下非受控组件，就是直接使用ref来获取input元素

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}> </input> </label> <button onClick={e=>this.handleSubmit}>提交</button> </form> </div> ) } handleSubmit(event){ //取消默认行为 event.preventDefault() console.log(this.usernameRef.current.value) } }