受控组件和不受控组件

React并没有提供v-model这种指令。
涉及到对表单的操作我们可以用到受控组件和非受控组件的概念
常见的表单元素：input、textarea、select，我们想要获取到值有几种方案
对于表单组件，按照其表单值（value、checked或者selected）是否被当前自定义的react组件的内部状态所控制，分为受控组件和不受控组件。

event获取表单对象

  1. import React, { Component } from 'react'
  2. export default class Demo01 extends Component {
  3.     // 当你绑定了事件过后，事件函数默认第一个参数就是event
  4.     getUsername = (event) => {
  5.         console.log(event.target.value);
  6.     }
  7.     getTypeValue = (event) => {
  8.         console.log(event.target.value);
  9.     }
  10.     render() {
  11.         return (
  12.             <div>
  13.                 <input type="text" onBlur={this.getUsername} />
  14.                 <button></button>
  15.                 <select name="" id="" onChange={this.getTypeValue}>
  16.                     <option value="sfz">身份证</option>
  17.                     <option value="jsz">驾驶证</option>
  18.                 </select>
  19.             </div>
  20.         )
  21.     }
  22. }

只要你绑定了事件，你会得到一个事件对象，再使用这个对象的event.target操作节点。
当你点击按钮后来获取文本框的值，event对象得到按钮。

受控组件

受控组件由于表单值被当前组件状态控制，所以要获取表单值，只需要在状态里面获取即可

受控组件的好处在于：我们可以对表单的值有更多的控制权，比如你想让用户输入的字母自动的转化为大写等等，
使用受控组件就很方便处理，不受控组件就没有办法了

以input为例，实现一个受控的表单组件有以下三步

  1. 在组件中定义一个内部状态，
  2. 把这个内部状态同input的value属性关联起来

  3. 给input绑定onChange事件，在事件处理函数里面把用户的输入值和之前定义的内部状态同步起来

    1. import React, { Component } from 'react'
    2. class Hello extends Component {
    3. state = {
    4.  val: ""
    5. }
    6. getInputVal = () => {
    7.  //直接从状态里面获取表单值
    8.  const { val } = this.state;
    9.  console.log('val', val);
    10. }
    11. inputChange = (e) => {
    12.  const val = e.target.value;//用户的输入值
    13.  this.setState({ val });//把用户输入值和内部状态val同步起来
    14. }
    15. render () {
    16.  const { val } = this.state;
    17.  return (
    18.    <div>
    19.      <input value={val} onChange={this.inputChange} />
    20.      <button onClick={this.getInputVal}>点我获取用户输入值</button>
    21.    </div>
    22.  )
    23. }
    24. }

    给input文本框绑定value值的时候，如果没有添加change事件页面会警告

    非受控组件

    ref

    不受控组件，由于其表单值没有被组件状态控制起来，所以要获取表单值，只能通过操作原生DOM的方式

    语法一

    无需将组件和state绑定在一起，获取到指定某个节点，ref的方式来获取这个数据
    React给我们提供了操作节点的方式，你可以直接获取节点，然后操作数据

    1. import React, { Component } from 'react'
    2. export default class Demo extends Component {
    3.  state = {
    4.      username: "小王"
    5.  }
    6.  getUsernameValue = () => {
    7.      console.log(this.usernameElement.value);
    8.  }
    9.  render() {
    10.      return (
    11.          <div>
    12.              <input
    13.                //通过ref直接给这个类的本身对象添加一个usernameElement,用户一输入立刻获取
    14.                ref={input=>this.usernameElement=input} 
    15.                type="text" 
    16.                defaultValue={this.state.username} />
    17.              <button onClick={this.getUsernameValue}>获取值</button>
    18.          </div>
    19.      )
    20.  }
    21. }

    语法二

    官网文档推荐用的语法。你首先声明ref引用。获取到结果是一个对象{current:input}

    1. import React, { Component } from 'react'
    2. export default class Demo04 extends Component {
    3.  constructor() {
    4.      super()
    5.      // 非受控组件，可以用React来创建一个引用
    6.      this.usernameElement = React.createRef()
    7.  }
    8.  getValue = () => {
    9.      console.log(this.usernameElement.current);
    10.  }
    11.  render() {
    12.      return (
    13.          <div>
    14.              <input type="text" ref={this.usernameElement} />
    15.              <button onClick={this.getValue}>获取</button>
    16.          </div>
    17.      )
    18.  }
    19. }

    面试题

    react中的ref有什么作用（注意：ref特性在项目中一定要少用，否则有违react设计思想）

  4. 获取DOM

  5. 访问组件实例