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 (
            <div>
                <div>{this.state.username}</div>
                <input type="text" value={this.state.username} onChange={this.handleChange}/>
            </div>
        )
    }
}复制代码

效果如下

总结

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

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

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

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

非受控组件

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

render() {
    return (
        <div>
            <input type="text" />
        </div>
    )
}复制代码

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 (
            <div>
                <input type="text" ref={(node)=> this.username= node} />
                <br/><br/>
                <button onClick={this.handleSubmit}>click</button>
            </div>
        )
    }
}复制代码

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

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 (
            <div>
                <input type="text" ref={this.username} />
                <br/><br/>
                <button onClick={this.handleSubmit}>click</button>
            </div>
        )
    }
}复制代码

转载于:https://juejin.im/post/5c8f6bed5188252db82a5901