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对象

相关推荐
excel6 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着6 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友8 小时前
什么是API签名?
前端·后端·安全
会豪10 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子10 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶10 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子10 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_10 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_233310 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin10 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js