React学习笔记八-受控与非受控组件

最新推荐文章于 2025-10-16 14:59:50 发布

原创

最新推荐文章于 2025-10-16 14:59:50 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #笔记

本文介绍了React中非受控组件和受控组件的概念，并通过具体的表单提交案例进行解析。非受控组件在用户输入时现用现取，而受控组件则通过onChange事件实时更新状态，保持数据同步。受控组件更符合React的状态管理原则，减少对ref的使用。

此文章是本人在学习React的时候，写下的学习笔记，在此纪录和分享。此为第八篇，主要介绍非受控组件与受控组件。

1.非受控组件

1.1表单提交案例

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

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

2.为form标签设置提交地址，onSubmit提交事件。为输入框设置ref。

3.在实例中写好from的提交事件handleSubmit。

class Login extends React.Component {
    handleSubmit = ()=>{
         const {username, password} = this
         alert(`您输入的用户名是，${username.value},输入的密码是${password.value}`)
    }
    render() {
         return (
             <form action="http://www.atguigu.com" onSubmit = {this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text" name="username" />
                密码：<input ref={c => this.password = c} type="password" name="password" />
                <button>登录</button>
              </form>