日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網(wǎng)站首頁 編程語言 正文

react中的雙向綁定你真的了解嗎_React

作者：前端三腳貓 ? 更新時間： 2022-05-07 編程語言

前言：因為項目原因需要學習另一個超級火的框架react, 因為之前一直使用vue進行開發(fā)，所以在學習react中會不自覺的代入一些vue中的概念來理解react中的實現(xiàn)，下面就通過對比學習的方式記錄下react中的知識。

在react中其實是沒有雙向綁定的概念，每次更新頁面和值都需要我們自己去調(diào)用指定的api來觸發(fā)，而在vue中只需要使用v-model指令就可以完全實現(xiàn)，在vue中的指令其實也是使用了幾個事件的語法糖來實現(xiàn)，所以下面就去看下react中的“雙向綁定”是怎么來實現(xiàn)的。

如果實現(xiàn)react中得雙向綁定，首先要理解state這個屬性，簡單來說react中得state就是一個對象，它用來緩存和維護當前組件中所使用到得狀態(tài)，可以理解為vue中data中定義得值，如：

import React, { Component } from 'react'
export default class Class extends Component {
  constructor(props) {
    super(props)
    this.state = {name: '', age: ''}
  }
  render() {
    return (
      

        

        

      

    )
  }
}

而在函數(shù)式組件中，使用hooks可以將這個統(tǒng)一的state值根據(jù)功能和場景拆分為多個state用來更加方便的使用和維護，如：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const [age, setAge] = useState()
  const handleSubmit = () => {
  }
  return (
    

      

      

    

  )
}

需要注意的是，如果需要改變維護的狀態(tài)的值，需要使用指定的方法才會使頁面更新，如函數(shù)式組件中定義的setName方法等。下面就看看react在input輸入框中實現(xiàn)雙向綁定，代碼如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [name, setName] = useState('')
  const handleCnhange = e => {
    const data = e.target.value
    setName(data)
  }
  return (
    

      

        
      

    

  )
}

上面的代碼通過useState定義了值name，然后通過input標簽的value將name展示出來，通過監(jiān)聽change事件獲取輸入的值并調(diào)用定義好的方法setName修改name的值并更新頁面，又使頁面展示為新輸入的值，通過這個流程的操作就實現(xiàn)了在react中的雙向綁定。如果我們想要修改和獲取多個輸入的值可以使用name屬性來實現(xiàn)，代碼如下：

import React, { useState } from 'react'
export default function ModelChange() {
  const [data, setData] = useState({
    name: '', age: ''
  })
  const handleCnhange = e => {
    const {value, name} = e.target
    setData(preData => {
      return {
        ...preData,
        [name]: value
      }
    })
  }
  const handleSubmit = (e) => {
    console.log(data)
  }
  return (
    

      

        
        
        
      

    

  )
}

上面代碼將name和age字段聲明在了一個集合中（根據(jù)業(yè)務和使用場景也可以進行拆分定義），通過給input標簽添加name屬性來更給指定屬性更新當前輸入的值，效果如下：

在這里插入圖片描述

總結

原文鏈接：https://blog.csdn.net/weixin_43911758/article/details/123312684

欄目分類
最近更新