03react18-基础篇(受控绑定与非受控绑定)

受控绑定

概念：使用React组件的状态（useState）控制表单的状态

image.png

具体步骤

• 1.声明一个react状态 - useState
• 2. 核心绑定流程
• 3. 通过value属性绑定react状态
• 4 绑定onChange事件 通过事件参数e拿到输入框最新的值 反向修改到react状态身上

// 受控绑定表单
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的方式获取表单的输入数据

• 1. useRef生成ref对象 绑定到dom标签身上
• 2. dom可用时，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