react常用操作

动态类名

使用classnames优化类名处理

比如下面的写法，但是如果你要判断的 类名多的话 就非常的麻烦

<button className={disabled ? 'btn btn-disabled' : 'btn'}>按钮</button>

安装依赖

npm i classnames

// 使用 classnames 优化类名处理
// 按钮的样式：
//  btn btn-disabled btn-small btn-large
import { useState } from 'react'

import classNames from 'classnames'

const App = () => {
  // 是否禁用
  const [disabled, setDisabled] = useState(false)
  // 大小
  const [size, setSize] = useState('small')

  return (
    <div>
      {/* 逻辑与 && --- 适用于处理单个类名*/}
      <button className={classNames('btn', disabled && 'btn-disabled')}>
        按钮
      </button>

      {/* 对象语法 --- 适用于处理多个类名 */}
      <button
        className={classNames('btn', {
          'btn-disabled': disabled,
          'btn-small': size === 'small',
          'btn-large': size === 'large',
        })}
      >
        按钮
      </button>
      <hr />
      <div>
        操作：
        <button onClick={() => setDisabled(true)}>禁用</button>
        <button onClick={() => setSize('small')}>变小</button>
        <button onClick={() => setSize('large')}>变大</button>
      </div>
    </div>
  )
}

export default App

DOM操作

用法也很简单，需要利用useRef事先声明一个ref对象，然后将它赋值给某个DOM就可以了。

import { useRef } from 'react'

const App = () => {
  const inputRef = useRef(null)

  // 注意：不要在组件渲染时，使用 ref 进行 DOM 操作,这个时候值为null
  console.log(inputRef.current)

  return (
    <div>
      <input ref={inputRef} />
      <hr />
      <button onClick={() => console.log(inputRef.current.value)}>
        获取文本框的值
      </button>
      <button onClick={() => inputRef.current.focus()}>获得焦点</button>
    </div>
  )
}

export default App

修改变量值

修改对象

注意：可能如果有些对象会比较复杂，我们可以用下面的方法来简化操作

https://react.dev/learn/updating-objects-in-state#write-concise-update-logic-with-immer