React学习笔记(3.0)

classnames优化类名控制

classnames是一个简单的JS库,可以非常方便的通过条件动态控制class类名的显示。

安装classnames:

复制代码
npm i classnames

导入:

javascript 复制代码
import classNames from 'classnames'
javascript 复制代码
 <div className={classNames('box3',{box2:1===1})}>我是使用classnames的文本</div>

这里使用了box3和box2的动态类名,我们来到对应的样式文件

设置了背景和字体颜色,来看最终效果

受控表单绑定

概念:使用React组件的状态(useState)控制表单的状态

在这里插入一下额外的小知识点--React调试工具:react developer tools

这个东西和vue调试工具一样,都需要去重谷歌商店中下载,不过懂的都懂,需要科学上网。也可以从网上找一些分享的资源进行下载即可,这里推荐一个网盘链接:

链接: https://pan.baidu.com/s/1wZ4BVFN65qjyxI9frRPJ7A?pwd=1rdp

下载完毕后,在开发者模式下拖拽到谷歌浏览器即可。

这时最好重启一下谷歌浏览器,否则对应的调试工具的components选项可能不会出来。

回到React双向绑定这里,就是在输入框输入值,然后在React调试工具中也可以看到对象的状态的值,相反,在调试工具中修改里面的值,对应输入框的值也会对应的进行修改。

对应的代码如下:

javascript 复制代码
// 1.声明一个React状态
  const [value,setValue]=useState('')
  //2.核心绑定流程
  //①通过value属性绑定React状态
  //②绑定onChange事件,通过事件参数e拿到输入框最新的值,反向修改到React状态
html 复制代码
<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}/>

React中获取DOM

在React中获取/操作dom,需要使用useRef钩子函数,分为两步:

1.使用useRef创建对象,并于tsx绑定

javascript 复制代码
const inputRef=useRef<HTMLInputElement>(null)
html 复制代码
<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}
      ref={inputRef}/>

2.在dom可用是,通过inputRef.current拿到dom对象

javascript 复制代码
const inputRef=useRef<HTMLInputElement>(null)
const showDom=()=>{
  console.log(inputRef.current);
  
}
html 复制代码
<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}
      ref={inputRef}/>
      <button onClick={showDom}>获取dom</button>
    </div>

所对应的效果,就是当我们点击按钮时,控制台输出dom对象

相关推荐
Hilaku6 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu13 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu17 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu17 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu21 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在23 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net
LuckySusu28 分钟前
【js篇】深入理解 JavaScript 原型与原型链
前端·javascript
文心快码BaiduComate32 分钟前
文心快码入选2025服贸会“数智影响力”先锋案例
前端·后端·程序员