快捷導(dǎo)航

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

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

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

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

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

如果實現(xiàn)react中得雙向綁定，首先要理解state這個屬性，簡單來說react中得state就是一個對象，它用來緩存和維護當(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可以將這個統(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 (
    <div>
      <form onSubmit={handleSubmit}>
      </form>
    </div>
  )
}

需要注意的是，如果需要改變維護的狀態(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 (
    <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的值并更新頁面，又使頁面展示為新輸入的值，通過這個流程的操作就實現(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 (
    <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字段聲明在了一個集合中（根據(jù)業(yè)務(wù)和使用場景也可以進行拆分定義），通過給input標(biāo)簽添加name屬性來更給指定屬性更新當(dāng)前輸入的值，效果如下：

在這里插入圖片描述