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