受控组件和非受控组件

受控组件

受控组件如果这个组件的状态是受react控制的就是受控组件，比如

const [name, setName] = useState('lifa')
  return (
    <div>
      <input type="text" value={name}/>
    </div>
  )

上面的input里的name是默认我们的state是'lifa'，如果我们直接在页面中修改，会发现不管我们输入什么input里的内容都不会变，原因react的ui的渲染是由state决定的，如果state不变那么ui就不会重新渲染
解决办法：在onChange的时候修改state

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

上面的这个input状态受react来控制的，所以是受控组件，我们修改它的值需要通过修改它依赖的state才可以修改它，如果我们不想修改它的state，那么就需要用到非受控组件

非受控组件

<input type="text" defaultValue={name}/>

上面的input里的value用了defaultValue也就是用了默认的input的值，所以不会受到react的控制，我们可以直接修改
问题：那我们怎么拿到这个非受控组件的值哪？
方法：通过ref

const refInput = useRef<HTMLInputElement>(null)
  const x = () => {
    console.log(refInput.current!.value)
  }
  return (
    <div>
      <input type="text" defaultValue={name} onChange={x} ref={refInput}/>
    </div>
  )

这样我们在修改的时候就能拿到input里的值了