react里面的value和defaultValue

在react表单里面存在两种组件形式,一种叫controlled component, 一种叫uncontrolled component。controlled的意思是说,你只能通过code去改变组件的状态,比如checkbox,如果是controlled,那么你只能通过code去改变它的选中状态,而不能靠用户点击来修改。而uncontrolled的组件反过来,只能通过用户操作来改变状态,而不能通过code来改变。很可惜,一个react组件,不能在这两个形态之间转换,所以这对你写的code会有影响。

怎么区分呢?很简单,看你的代码是使用defaultValue/defaultChecked还是直接使用value/checked。如果是使用value/checked,那么是controlled,反之则是unconrolled。

另外还有两个属性,disabled和readOnly,这两个属性其实要配合这两种形态来使用。controlled component只和readOnly配合,uncontrolled component只和disabled。如果一个input设置了value属性,但是没有给onChange或readOnly,控制台会有错误提示。这是因为,一个controlled组件,它的创建一定要用于控制,而非为了初始化一个值。这种情况下如果你想在外部去控制它,而不是它的onchange事件中,那么应该添加readOnly,这样就不会报错了。当然,这里的配合只是我的个人感悟,并非官方强制。