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);
  }
相关文章
|
1天前
|
前端开发 JavaScript
HTML DOM如何通过JavaScript动态改变元素的CSS样式?
【5月更文挑战第23天】HTML DOM如何通过JavaScript动态改变元素的CSS样式?
3 1
|
6天前
|
JavaScript 前端开发 架构师
Web Components:自定义元素与Shadow DOM的实践
Web Components是用于创建可重用自定义HTML元素的技术集合,包括Custom Elements、Shadow DOM、HTML Templates和Slots。通过Custom Elements定义新元素,利用Shadow DOM封装私有样式,&lt;slot&gt;元素允许插入内容。自定义元素支持事件处理和属性观察,可复用且样式隔离。它们遵循Web标准,兼容各前端框架,注重性能优化,如懒加载和Shadow DOM优化。
7 0
|
8天前
|
存储 移动开发 JavaScript
jQuery 根据 css 类筛选 DOM 元素的代码
jQuery 根据 css 类筛选 DOM 元素的代码
19 1
|
8天前
|
移动开发 JavaScript 前端开发
jQuery 根据 DOM 元素 attribute 进行过滤的语法
jQuery 根据 DOM 元素 attribute 进行过滤的语法
11 2
|
8天前
|
JavaScript 前端开发 算法
React中的DOM diff算法是如何工作的
React的DOM diff算法通过对比新旧虚拟DOM树找到最小更新策略,提高组件更新效率。它生成并比较虚拟DOM,按类型、属性和&quot;key&quot;逐节点检查。不同类型节点直接替换,属性不同则更新属性,相同则递归比较子节点。确定DOM操作后批量执行,减少对真实DOM的访问,优化性能。然而,在复杂场景下可能有性能问题,可借助shouldComponentUpdate、memo或PureComponent等进行优化。
|
8天前
|
JavaScript 前端开发 容器
js操作dom元素
js操作dom元素
18 0
|
8天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
8天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
8天前
|
JavaScript 前端开发 索引
【Web 前端】JQ对象和DOM元素之间如何转换?
【4月更文挑战第22天】【Web 前端】JQ对象和DOM元素之间如何转换?
|
8天前
|
JavaScript 前端开发
JavaScript DOM 文档对象模型(获取、改变html元素)
JavaScript DOM 文档对象模型(获取、改变html元素)

热门文章

最新文章