1.非受控组件

1.1表单提…此文章是本人在学习React的时候写下的学习笔记在此纪录和分享。

此为第八篇主要介绍非受控组件与受控组件。

1.非受控组件

首先我们写一个表单表单内是用户名和密码我们点击登录会弹窗显示我们输入的用户名和密码。

1.创建类Login在render函数内写好dom结构form表单内有两个输入框一个按钮。

2.为form标签设置提交地址onSubmit提交事件。

为输入框设置ref。

class

thisalert(您输入的用户名是${username.value},输入的密码是${password.value})}render()

{return

document.getElementById(test1))

点击弹窗的确定按钮后页面跳转到我们写好的地址并且用户名和密码拼接到url地址后面。

如此功能都实现了但是如果我们不想让页面进行跳转呢比如说ajax技术页面在不刷新的情况下获取数据。

现在的网页对用户的体验非常重视不希望在点击页面的时候页面频繁刷新或者跳转所以我们这个案例想办法把页面跳转去掉。

我们获取用户名和密码之后点击确定会引发表单的默认事件跳转到action属性设置的页面。

这是表单的默认事件即使删除action属性也不能阻止这个默认事件。

所以我们得使用preventDefault改写一下表单的提交事件。

代码如下我们给事件函数传入一个参数event因为事件源是这个表单所以这个参数event就是表单。

在函数内我们直接使用event.preventDefault()来阻止默认事件阻止跳转页面。

handleSubmit

thisalert(您输入的用户名是${username.value},输入的密码是${password.value})

在表单中输入类的dom(输入框单选多选等)如果是现用现取那就是非受控组件。

比如说这个案例里面有表单表单里面有两个输入框先设置ref标识只有在点击登录按钮触发事件函数的时候才根据ref来获取这两个输入框里面的值。

2.受控组件

1.首先我们将ref去掉不给两个输入框设定ref使用onchange事件onchange事件只要input框内的内容发生改变就会触发可以实时监控输入框内容。

注意react内要写成onChange。

2.然后我们写事件函数参数为event就是事件源--这个输入框。

我们直接将输入框的内容event.target.value使用setState这个api存储到state状态里面。

如此我们就完成了案例的改写输入框的值只要发生变化就会把新的值存储到state保证state内的值与输入框联动实时的更新。

这就不再是现用现取。

代码如下

{username:,//用户名password://密码}//保存用户名到状态中saveUsername

(event){this.setState({username:event.target.value})}//保存密码到状态中savePassword

(event){this.setState({password:event.target.value})}//表单提交的回调handleSubmit

(event)

this.statealert(您输入的用户名是${username},输入的密码是${password})}render()

{return

onSubmit{this.handleSubmit}用户名input

onChange

/button登录/button/form)}}ReactDOM.render(Login

document.getElementById(test1))

2.1受控案例总结

这样的就是受控组件。

这样的输入类的dom如input框随着用户的输入就可以把数据实时的维护到状态(state)中去等到你使用就可以直接从状态里面拿这就是属于受控组件。

接触过vue的伙伴们这个受控组件是不是非常像vue中的双向数据绑定v-model但react里面没有实现数据双向绑定所以在这个地方得使用onchange。

受控组件内不用ref符合react官网对开发者们要求少使用ref的规范所以使用受控组件是比较好的。

非受控组件每个输入类dom都得加一个ref标识麻烦一点但也无伤大雅。