当前位置：首页 > article >正文

React-表单受控绑定和获取Dom元素

article 2024/9/22 4:02:51

一、表单受控组件

1.声明一个react状态

说明：useState

const [value,setValue]=useState("")

2.核心绑定流程

2.1绑定react状态

<div>
  <input value={value}
  type="text"
  ></input>

2.2绑定onChange事件

说明：e.target.value拿到输入框的值

function App() {
  const [value,setValue]=useState("")
  return (
<div>
  <input value={value}
  onChange={e=>setValue(e.target.value)}
  type="text"
  ></input>
</div>
  );
}

3.测试

二、获取Dom元素

1.绑定dom

说明：userRef生成ref对象绑定到dom标签上。

const inputRef=useRef(null)

<input ref={inputRef}></input>

2.获取dom

说明：dom可用时，ref.current获取dom。

function App() {
  const [value,setValue]=useState("")
  // 1.userRef生成ref对象 绑定到dom标签上
  // 2.dom可用时，ref.current获取dom
  // 渲染完毕之后dom生成之后才可用
  const inputRef=useRef(null)

  const showDom=()=>{
    console.dir(inputRef.current);

  }
  return (
<div>
  <input ref={inputRef}></input>
  <input value={value}
  onChange={e=>setValue(e.target.value)}
  type="text"
  ></input>
  <button onClick={showDom}>获取Dom</button>
</div>
  );
}