React 受控组件和 非受控组件

React中的受控组件和非受控组件学习总结

一、受控组件(React官方推荐)

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

示例代码：
input 绑定了 state 中的 username，当用户输入时，
触发 onChange 事件，通过 e.target.value 拿到
用户输入的值，setState 改变 username，相应的
input 框的值发生改变

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

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

实例的构造函数 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>
        )
    }
}

总而言之：

在react中，只有input=(text number email。。。。) textarea select(单选) 标签
可以做成受控组件， input=(radio checkbox...)不能做成受控组件

受控组件都是一个特点

1. 绑定value值
2. 实现change事件，事件内，接收ev.target.value,重新设置给state中绑定的value值

{/* 受控组件 */}
<input type="text" value={this.state.value} onChange={this.changeAction.bind(this)}/>

{/* 非受控组件 */}
<input type="text" ref="input"/>
<button onClick={this.btnAction.bind(this)}>获取</button>

转载自：https://juejin.im/post/5c8f6bed5188252db82a5901