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 容器
React 元素渲染
10月更文挑战第7天
32 1
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
1月前
|
JavaScript 前端开发
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
80 4
|
2月前
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
65 3
|
1月前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript
在Vue中获取DOM元素的实际宽高
【10月更文挑战第2天】
344 1
|
3月前
|
JavaScript 前端开发
JavaScript HTML DOM 元素 (节点)
JavaScript HTML DOM 元素 (节点)
29 2