快捷導(dǎo)航

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

更新時(shí)間：2022年03月07日 16:38:08 作者：前端三腳貓

這篇文章主要為大家詳細(xì)介紹了react中的雙向綁定，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

前言：因?yàn)轫?xiàng)目原因需要學(xué)習(xí)另一個(gè)超級(jí)火的框架react, 因?yàn)橹耙恢笔褂胿ue進(jìn)行開發(fā)，所以在學(xué)習(xí)react中會(huì)不自覺的代入一些vue中的概念來理解react中的實(shí)現(xiàn)，下面就通過對(duì)比學(xué)習(xí)的方式記錄下react中的知識(shí)。

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

如果實(shí)現(xiàn)react中得雙向綁定，首先要理解state這個(gè)屬性，簡(jiǎn)單來說react中得state就是一個(gè)對(duì)象，它用來緩存和維護(hù)當(dāng)前組件中所使用到得狀態(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 (
      <div>
        <form onSubmit={handleSubmit}>
        </form>
      </div>
    )
  }
}

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

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

需要注意的是，如果需要改變維護(hù)的狀態(tài)的值，需要使用指定的方法才會(huì)使頁(yè)面更新，如函數(shù)式組件中定義的setName方法等。下面就看看react在input輸入框中實(shí)現(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 (
    <div>
      <form>
        <label>
          名字：
          <input type="text" value={name} onChange={handleCnhange} />
        </label>
      </form>
    </div>
  )
}

上面的代碼通過useState定義了值name，然后通過input標(biāo)簽的value將name展示出來，通過監(jiān)聽change事件獲取輸入的值并調(diào)用定義好的方法setName修改name的值并更新頁(yè)面，又使頁(yè)面展示為新輸入的值，通過這個(gè)流程的操作就實(shí)現(xiàn)了在react中的雙向綁定。如果我們想要修改和獲取多個(gè)輸入的值可以使用name屬性來實(shí)現(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 (
    <div>
      <form>
        <label>
          名字：
          <input type="text" name="name" value={data.name} onChange={handleCnhange} />
        </label>
        <label>
          年齡：
          <input type="text" name="age" value={data.age} onChange={handleCnhange} />
        </label>
        <input type="button" value="提交" onClick={handleSubmit} />
      </form>
    </div>
  )
}

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

在這里插入圖片描述