(五)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元素

相关推荐
1024小神3 分钟前
使用tauri打包cocos小游戏,并在抖音小玩法中启动,拿到启动参数token
前端
用户游民11 分钟前
Flutter Android 端启动加载流程剖析
前端
林太白21 分钟前
项目中的层级模块到底如何做接口
前端·后端·node.js
lichenyang45323 分钟前
理解虚拟 DOM:前端开发中的高效渲染利器
前端
没烦恼30141 分钟前
登录表单提交:按钮点击事件 vs form submit事件,该如何选择?
javascript
xiguolangzi41 分钟前
vue3 字体管理
前端
伍华聪1 小时前
基于Vant4+Vue3+TypeScript的H5移动前端
前端
Nayana1 小时前
axios-取消重复请求--CancelToken&AbortController
前端·axios