受控綁定

概念：使用React組件的狀態(tài)（useState）控制表單的狀態(tài)

image.png

具體步驟

• 1.聲明一個(gè)react狀態(tài) - useState
• 2. 核心綁定流程
• 3. 通過value屬性綁定react狀態(tài)
• 4 綁定onChange事件 通過事件參數(shù)e拿到輸入框最新的值 反向修改到react狀態(tài)身上

// 受控綁定表單
import { useState } from "react"
function App () {
  const [value, setValue] = useState('')
  return (
    <div>
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        type="text" />
    </div>
  )
}
export default App

非受控綁定

概念：通過獲取DOM的方式獲取表單的輸入數(shù)據(jù)

• 1. useRef生成ref對(duì)象 綁定到dom標(biāo)簽身上
• 2. dom可用時(shí)，ref.current獲取dom
     渲染完畢之后dom生成之后才可用

// React中獲取DOM
import { useRef } from "react"
function App () {
  const inputRef = useRef(null)
  const showDom = () => {
    console.dir(inputRef.current)
  }
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={showDom}>獲取dom</button>
    </div>
  )
}

export default App

image.png