React基础之受控表单绑定

受控表单绑定概念:使用React组件的状态控制表单的状态

实例代码

import React, { useState } from 'react';

import classNames from 'classnames';

//1.声明一个react状态-useState

//2.核心绑定流程

//1.通过value书写绑定react状态

//2.绑定onChange事件,通过事件参数e拿到输入框最新数据,反向修改react状态

function App() {

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

return (

<div>

<input

value={value}

onChange={(e)=>setValue(e.target.value)}

type='text'

>

</input>

</div>

);

}

export default App;

React中获取去Dom

需要使用useRef钩子函数来获取,分为两步

1.使用useRef创建ref独享,并且与jsx绑定

2.在Dom可用时,在inutRef.current拿到DOM对象

import React, { useRef, useState } from 'react';

//1.使用useRef生成Ref对象,绑定到dom标签中

//2.dom可用时,ref.current获取dom

//需要整个组件渲染完毕或是dom生成之后才能使用

function App() {

const inputRet=useRef(null)

const showDom=()=>{

console.dir(inputRet.current);

}

return (

<div>

<input type='text' ref={inputRet}>

</input>

<button onClick={showDom}>获取Dom</button>

</div>

);

}

export default App;

相关推荐
LCG元5 小时前
STM32实战:基于STM32F103的Bootloader设计与IAP在线升级
javascript·stm32·嵌入式硬件
超级无敌暴龙兽7 小时前
和我一起刷面试题呀
前端·面试
wzl202612137 小时前
企业微信定时群发技术实现与实操指南(原生接口+工具落地)
java·运维·前端·企业微信
小码哥_常7 小时前
Robots.txt:互联网爬虫世界的“隐形规则”
前端
小码哥_常7 小时前
Android开发神器:AndroidAutoSize,轻松搞定屏幕适配
前端
前端一小卒7 小时前
前端工程师的全栈焦虑,我用 60 天治好了
前端·javascript·后端
不停喝水7 小时前
【AI+Cursor】 告别切图仔,拥抱Vibe Coding: AI + Cursor 开启多模态全栈新纪元 (1)
前端·人工智能·后端·ai·ai编程·cursor
coderyi8 小时前
LLM Agent 浅析
前端·javascript·人工智能
我叫黑大帅8 小时前
TypeScript 6.0 弃用选项错误 TS5101 解决方法
javascript·后端·面试