受控组件——React 个人学习笔记（2）

受控组件和非受控组件

在学vue的时候没什么受控组件非受控组件的概念 也可能是没有专门的去区分,在学react这边我就先了解区分一下吧

改变表单值只有两种情况

• 用户改变表单值
• 代码改变表单值

如果不能通过代码改变表单值value那就是非受控组件 但是代码可以给表单设置初始值defaultValue

写个代码看看:

function Home() {
  const onchange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value)
  }

  return (
    <input type="text" defaultValue="rika" onChange={onchange} />
  )
}

export default Home

可以看到defaultValue作为输入的初始值,然后通过事件参数拿到value

同时可以看到事件的类型为React.ChangeEvent<HTMLInputElement>

非受控模式也不一定通过onChange拿到最新value ref也行

再写个受控模式的

import { useState } from 'react'

function Home() {
  const [value, setValue] = useState('')
  const onchange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }

  return (
    <input type="text" value={value} onChange={onchange} />
  )
}

export default Home

很明显可以看出区别,就不再赘述了

每次输入都会setValue会触发组件重新渲染,而非受控模式下只会渲染一次 所以这种情况下使用受控模式没什么好处

什么时候使用受控模式

需要对用户输入的值进行处理的时候,比如将用户输入的值全部改为大写

import { useState } from 'react'

function Home() {
  const [value, setValue] = useState('')
  const onchange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value.toLocaleUpperCase())
  }

  return (
    <input type="text" value={value} onChange={onchange} />
  )
}

export default Home

但是这种情况绝对不多

好像form组件里面也是全受控的,但是我没写过不知道

差不多就这样,大概理解了 面试可能会问吧