React学习笔记（3.0）

classnames优化类名控制

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

安装classnames：

npm i classnames

导入：

import classNames from 'classnames'

 <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调试工具中也可以看到对象的状态的值，相反，在调试工具中修改里面的值，对应输入框的值也会对应的进行修改。

对应的代码如下：

// 1.声明一个React状态
  const [value,setValue]=useState('')
  //2.核心绑定流程
  //①通过value属性绑定React状态
  //②绑定onChange事件，通过事件参数e拿到输入框最新的值，反向修改到React状态

 

<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}/>

React中获取DOM

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

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

const inputRef=useRef<HTMLInputElement>(null)

<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}
      ref={inputRef}/>

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

const inputRef=useRef<HTMLInputElement>(null)
const showDom=()=>{
  console.log(inputRef.current);
  
}

<input type="text" 
      value={value}
      onChange={(e)=>setValue(e.target.value)}
      ref={inputRef}/>
      <button onClick={showDom}>获取dom</button>
    </div>

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