react简单实现获取dom元素

简介: react简单实现获取dom元素

第一个方法:


// 使用ref声明一个变量
  const tel = useRef(null)
  const pass = useRef(null)


再给input 内标签属性里面绑定 ref={变量名}

<input
                  className={style.inputs}
                  type="text"
                  placeholder="请输入手机号/用户名/邮箱"
                  ref={tel}
                  onInput={(e)=>{setAcc(e.target.value)}}
                />


再给点击事件绑定你的获取该元素 绑你的组件函数名

<p className={style.login} onClick={login}>登&nbsp;录</p>


点击事件输出一下就好啦

const login = ()=>{
    console.log(tel.current.value);
    // console.log(pass.current.value);
  }


第二个方法:


 // 声明一个变量
  const [acc,setAcc] = useState('')


通过onInput事件绑定就可以获取到值啦

              <input
                  className={style.inputs}
                  type="text"
                  placeholder="请输入手机号/用户名/邮箱"
                  ref={tel}
                  onInput={(e)=>{setAcc(e.target.value)}}
                />


输出acc就可以看到值啦

const login = ()=>{
    console.log(acc);
  }
相关文章
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
22天前
|
JavaScript
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
怎么判断两个文档节点、网页元素(element)是否相同?判断两个DOM节点是否相等、相同的4种方法
|
27天前
|
JavaScript
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
vue监听dom元素的宽高变化和自定义指令监听dom元素的宽高变化
26 0
|
2月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
25 0
|
1天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
1天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
1天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
12 1
|
16天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何动态创建和插入元素?
使用JavaScript的`createElement`, `createTextNode`和`appendChild`方法可动态创建并插入元素。
13 2