React中的受控组件和非受控组件学习总结-白红宇

故事：Form表单是前端开发过程中经常使用的功能，在使用react 表单时，都会遇到受控组件或者非受控组件。当我听到这两个关键词的时候确实有点懵逼，不知道啥意思，因此记录下来，作为自己的学习目标

受控组件(React官方推荐使用受控组件)

在React中，每当表单的状态发生变化时，都会被写入到组件的state中，这种组件在React被称为受控组件

import React, {PureComponent} from "react"import {PropTypes} from 'prop-types';import {BrowserRouter as Router, Route, Link} from 'react-router-dom'export default class Form extends React.Component {    constructor(props) {        super(props)    }    state = {        username:"你我贷"    }    handleChange = (e) => {        let name = e.target.value;        this.setState({            username: name        })    }    render() {        return (            
                    
     
      {this.state.username}
     
                
                 
    
        )    }}复制代码

效果如下

总结

1. 可以通过在初始state中动态设置value值

2. 每当表单的值发生变化时，调用onChange事件处理器。如果添加了value （单选框和复选框对应的是checked）而没有添加onChange会受到react警告

3. 事件处理器通过合成事件对象e拿到改变后的状态，并更新state。

4. setState触发视图的重新渲染，完成表单组件值得更新

非受控组件

表现形式上，react中没有添加value属性（单选按钮和复选框对应的是checked）的表单组件元素就是非受控组件

render() {    return (        
                
             
    
    )}复制代码

1）非受控组件即不受状态的控制，获取数据就是相当于操作DOM。

2）非受控组件的好处是很容易和第三方组件结合。

非受控组件获取输入框中的值的两种方法

第一种方式：函数

因为不受控组件的数据来源是 DOM 元素，所以一般情况下不受控组件我们使用ref来获取DOM元素进行操作。即在虚拟DOM节点上使用ref，并使用函数，将函数的参数挂载到实例的属性上

import React, {PureComponent} from "react"import {PropTypes} from 'prop-types';import {BrowserRouter as Router, Route, Link} from 'react-router-dom'export default class Form extends React.Component {    constructor(props) {        super(props)    }    handleSubmit = (e) => {        e.preventDefault();        console.log(this.username)        console.log(this.username.value)    }    render() {        return (            
                    
      this.username= node} />                
     
     
                
                 
    
        )    }}复制代码

第二种方式：通过构造函数声明的方式

react 16.3新语法

实例的构造函数constructor这创建一个引用

在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性

react会自动将输入框中输入的值放在实例的second属性上

import React, {PureComponent} from "react"import {PropTypes} from 'prop-types';import {BrowserRouter as Router, Route, Link} from 'react-router-dom'export default class Form extends React.Component {    constructor(props) {        super(props)        // 在构造函数中创建一个引用        this.username = React.createRef();    }    handleSubmit = (e) => {        e.preventDefault();        console.log(this.username)        console.log(this.username.current)        console.log(this.username.current.value)    }    render() {        return (            
                    
                     
     
     
                
                 
    
        )    }}复制代码