(五)React受控表单、获取DOM

1. React受控表单

概念:使用React组件的状态(useState)控制表单的状态

  1. 准备一个React状态值
javascript 复制代码
const [value, setValue] = useState('')
  1. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数
javascript 复制代码
<input 
   type="text"
   valye={value}
   onChange={(e) => setValue(e.target.value)}
/>

实现效果:

  • 无论修改表单或者State,对应一方也会对应改变

2. React获取DOM

在React组件中获取、操作DOM,需要使用useRef钩子函数,分为两步:

  1. 使用useRef创建ref对象,并与JSX绑定
javascript 复制代码
 const inputRef = useRef(null)
<input type="text" ref={inputRef} />
  1. 在DOM可用时,通过inputRef.current拿到DOM对象
javascript 复制代码
console.log(inputRef.current)

用例:

javascript 复制代码
import {useRef} from "react";

function App() {
    const inputRef = useRef(null)

    const showDOM = () => {
        console.log(inputRef.current)
    }
    return (
        <div>
            <input type="text" ref={inputRef}/>
            <button onClick={showDOM}>获取DOM</button>
        </div>
    );
}

export default App;

点击按钮,console打印dom元素

相关推荐
太阳伞下的阿呆3 小时前
本地环境vue与springboot联调
前端·vue.js·spring boot
阳光是sunny3 小时前
走进微前端(1)手写single-spa核心原理
前端·javascript·vue.js
烛阴4 小时前
Ceil -- 从平滑到阶梯
前端·webgl
90后的晨仔4 小时前
🔍Vue 模板引用(Template Refs)全解析:当你必须操作 DOM 时
前端·vue.js
90后的晨仔4 小时前
👂 Vue 侦听器(watch)详解:监听数据的变化
前端·vue.js
90后的晨仔4 小时前
深入浅出 Vue 的 computed:不仅仅是“计算属性”那么简单!
前端·vue.js
Nan_Shu_6145 小时前
学习:入门uniapp Vue3组合式API版本(17)
前端·vue.js·学习·uni-app
止观止5 小时前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军5 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安6 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js