快捷導航

淺談React雙向數(shù)據(jù)綁定原理

更新時間：2021年11月12日 15:16:33 作者：Mrqin-shen

在 React中是不存在雙向數(shù)據(jù)綁定的機制的，需要我們自己對其進行實現(xiàn)。本文主要介紹一下React雙向數(shù)據(jù)綁定，感興趣的可以了解一下

什么是雙向數(shù)據(jù)綁定

數(shù)據(jù)模型和視圖之間的雙向綁定。

當數(shù)據(jù)發(fā)生變化的時候，視圖也就發(fā)生變化，當視圖發(fā)生變化的時候，數(shù)據(jù)也會跟著同步變化；可以這樣說用戶在視圖上的修改會自動同步到數(shù)據(jù)模型中去，數(shù)據(jù)模型也是同樣的變化。

雙向數(shù)據(jù)綁定的優(yōu)點：無需和單向數(shù)據(jù)綁定那樣進行CRUD（Create，Retrieve，Update，Delete）操作，雙向數(shù)據(jù)綁定最常應(yīng)用在就表單上，這樣當用戶在前端頁面完成輸入后，不用任何操作，我們就已經(jīng)拿到了用戶輸入好的數(shù)據(jù)，并放到數(shù)據(jù)模型中了。

實現(xiàn)雙向數(shù)據(jù)綁定

但是，在 React中是不存在雙向數(shù)據(jù)綁定的機制的，需要我們自己對其進行實現(xiàn)。

數(shù)據(jù)影響視圖

這種功能實際上，React 已經(jīng)幫助我們實現(xiàn)了，使用 setState({ }) 方法修改數(shù)據(jù)。
（React內(nèi)部提供的修改方法），不允許通過this.state.屬性名 = 數(shù)據(jù) 的方法進行數(shù)據(jù)修改。

代碼

import React, { Component } from 'react';
// 引入 antd UI庫
import { Button } from 'antd';  
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal:'',
         };
    }   
    setValue=()=>{
        this.setState({
            inputVal:"修改 Value"
        })
    }
    render() {
        return (
            <div className="home" >
                Home組件
                <p> {this.state.inputVal}</p>
                 {/* 使用了 antd UI庫 */}
                <Button type="primary" onClick={this.setValue}>修改數(shù)據(jù)</Button>
            </div>
        );
    }
}
export default Home;

效果

在這里插入圖片描述

視圖影響數(shù)據(jù)

通過 React 提供的 onChage 監(jiān)聽事件 實現(xiàn)數(shù)據(jù)的動態(tài)錄入
同時，使用 value 或者 defaultValue 在 input 框中呈現(xiàn)內(nèi)容
為了方便顯示，這里使用了 p 標簽來顯示內(nèi)容

代碼

import React, { Component } from 'react';
import { Button } from 'antd'; // antd UI庫
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            inputVal:'',
         };

    }    
    change = (ev)=>{
        this.setState({
            inputVal:ev.target.value
        })
    }
    render() {
        return (
            <div className="home" >
                Home組件
				<input 
                    onChange={this.change}
                    // value={this.state.inputVal}
                    defaultValue={this.state.inputVal}
                    placeholder="輸入文本內(nèi)容"
                 />
                <p>&emsp;{this.state.inputVal}</p>
            </div>
        );
    }
}
export default Home;

效果

在這里插入圖片描述