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)
  }
}

在这里插入图片描述

展开阅读全文
©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值