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

相关推荐
麻雀无能为力11 分钟前
python自学笔记2 数据类型
开发语言·笔记·python
若初&11 分钟前
文件上传Ⅲ
前端·web安全
若愚679211 分钟前
前端取经路——前端安全:构建坚不可摧的Web应用防线
前端·安全
邪恶的贝利亚15 分钟前
定时器设计
java·linux·前端
饕餮争锋17 分钟前
WebMvcConfigurer介绍-笔记
java·笔记·servlet
houliabc34 分钟前
【2025年软考中级】第一章1.5 输入输出技术(外设)
笔记·学习·证书·软考·计算机系统
inksci35 分钟前
Vue 3 打开 el-dialog 时使 el-input 获取焦点
前端·javascript·vue.js
若愚67921 小时前
前端取经路——量子UI:响应式交互新范式
前端·ui·交互
请你喝好果汁6411 小时前
学习笔记:Conda 环境共享
笔记·学习·conda