React学习笔记之七(Form)

Form组件(input,textarea,option等)不同于其它原生html组件,会随着用户交互随时变化。

交互性的props

value:input和textarea支持

checked:checkbox和radio

selected:option支持

在HTML<textarea>通过children来设置值,在React中使用value。

这些组件如果有用户交互发送变化时,会触发onChange事件,可以通过onChange(驼峰命名规则)属性来添加事件函数

tips:① input也不在使用oninput事件监听

② 在checkbox里面,如果在onChange事件里面调用了ev.preventDefault(),那么在click触发时,

checkbox并不会被选中,这个问题需要移除ev.preventDefault()

 

可控和不可控的组件

具有value属性的input是可控的组件,不具有value的是不可控的组件。

设置defaultValue=””的值可以给组件一个默认值,checkbox和radio支持defaultChecked=””,select支持defaultValue

 

可能版本升级跟官网的描述有点差异,这里我经过测试以后,理解为:元素的input元素如果要设置初始值需要使用以上两个属性之一,如果直接设置了value的值,input元素变成只读的元素,无法修改。这说明value值必须是绑定到了状态,改变的结果会存入state,value值是可控的。

 

textarea的设置是在value和defaultValue里面,<textarea>而不是这里</textarea>

 

reactjs
作者:张雪飞
出处:https://zhangxuefei.site/p/1432
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论

电子邮件地址不会被公开。 必填项已用*标注