今天用 shadn ui 的 form 组件,其中提到了这是个受控组件,起初我还没注意。后面调试的时候发现我一往 input 里面
写东西,控制台就疯狂报错
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:
第一次在实际中遇到受控组件因为没有默认值报错,复习一下:
涉及到输入,就绕不开受控模式和非受控模式的概念。改变表单值只有两种情况:
用户去改变 value 或者代码去改变 value。
如果不能通过代码改表单值 value,那就是非受控,也就是不受我们控制。
但是代码可以给表单设置初始值 defaultValue。
代码设置表单的初始 value,但是能改变 value 的只有用户,代码通过监听 onChange 来拿到最新的值,或者通过 ref 拿到 dom 之后读取 value。
这种就是非受控模式。
反过来,代码可以改变表单的 value,就是受控模式。
value 由用户控制就是非受控模式,由代码控制就是受控模式。