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> ) } }複製代碼