likes
comments
collection
share

React 学习笔记（12）受控组件&非受控组件

作者站长头像
站长
· 阅读数 13

需求

先写一段代码再来引入受控组件和非受控组件这两个概念，写一个表达，收集用户名和密码，再来一个按钮提交，收集表单会通过两个例子来展现两种不同类型的写法

非受控组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Login extends React.Component {
            handleSubmit = (event)=>{
                event.preventDefault()  //阻止表达提交
                const {username, password} = this
                alert(`你输入的用户名：${username.value},你输入的密码是：${password.value}`)
            }

            render() {
                return (
                    <form 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>
                )
            }
        }
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>

详解&注意&回顾

  • form表单的内的表单自带提交功能。相当于<button type=submit>登录</button>，但这个规则不适用于IE浏览器

  • onSubmit在原生的JavaScript 里面是小写：onsubmit，在React里面需要大写

  • 使用了event.preventDefault()防止表单提交跳转，意思就是阻止默认事件，我们只需要展示一下输入的用户名密码。

  • 在handleSubmit中使用了箭头函数的特点，常规函数中，关键字 this 表示调用该函数的对象，箭头函数this 关键字始终表示定义箭头函数的对象。获取参数的路径是event得到表单form，从form表单获取到了username，password。

  • ref={c =>this.username = c} 回调函数形式绑定refs，重新复习一下这个 回调函数 形式的绑定，就是在dom节点或组件上挂载函数，函数的入参是dom节点或组件实例，达到的效果与字符串形式是一样的，都是获取其引用，实在际开发中使用的比较多。

  • 回调函数handleSubmit中的 const {username, password} = this获取的是ref绑定的真实DOM节点。所以在在下面使用需要使用username.value和password.value

  • 模板字符串： ``, 是允许嵌入表达式的字符串（可以使用多行字符串和字符串[插值]),以反引号 开头，以反引号 结尾。后面使用花括号 ${val}，val为插入变量的值。

页面内所有的输入类型DOM都是现用现取就是非受控组件

受控组件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习React</title>
</head>

<body>
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Login extends React.Component {
            state = {
                username:'',//用户名
                password:'' //密码
            }
            saveUsername = (event)=>{
                this.setState({username:event.target.value})
            }
            savePassword = (event)=>{
                this.setState({password:event.target.value})
            }
            handleSubmit = (event)=>{
                event.preventDefault()  //阻止表单提交
                const {username, password} = this.state
                alert(`你输入的用户名：${username},你输入的密码是：${password}`)
            }
            render() {
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名：<input onChange = {this.saveUsername} type = "text" name = 'username'/>
                        密码：<input onChange = {this.savePassword} type = "password" name = 'password' />
                        <button>登录</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login />, document.getElementById('test'))
    </script>
</body>

</html>

随着输入维护相关状态就是受控组件

官方文档中在说refs的时候强调了请勿过度使用Refs，在这个非受控组件的例子中使用onChange，只要改变了input的值就会实时调用相关函数，saveUsername和savePassword这两个函数会直接把输入的值直接维护到之前所学的状态state里。随后表单提交的时候会从state里面获取，这就叫随着输入维护相关状态。

但是用户名和密码都需要一个独立的函数才能维护其状态，如果表单的输入内容非常多，那么就会有很多函数去处理，这样非常繁琐，下篇来学习JavaScript高级函数。

转载自:https://juejin.cn/post/7105560552197324837
评论
请登录