React中收集表单数据（受控组件、非受控组件）

Qiuxuntao

已于 2022-04-21 17:12:32 修改

阅读量179

点赞数

分类专栏： react 文章标签：前端 react

于 2022-04-21 16:55:13 首次发布

本文链接：https://blog.csdn.net/Qiuxuntao/article/details/124322734

版权

react 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

一、🌈效果
二、🌈理解
三、🌈非受控组件
四、🌈受控组件
五、🌈结论

一、🌈效果

需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息

请添加图片描述

二、🌈理解

包含表单的组件分类
1.受控组件
2.非受控组件

三、🌈非受控组件

3.1、非受控组件：现用现取。要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用ref来从 DOM 节点中获取表单数据
3.2、阻止表单提交

event.preventDefault()

<!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>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='test'></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 引入react-dmo 用于react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 此处一定要写babel -->
    <script type="text/babel">



        // 1.创建组件

        //非受控组件 ：现用现取
        class Login extends React.Component {
            handleSubmit = (event) => {
                event.preventDefault()//阻止表单提交
                const { username, password } = this
                alert(`用户名：${username.value},密码：${password.value}`)
            }
            render() {
                return (
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名:<input ref={c => this.username = c} type='text' name='username' />
                        密码:<input ref={c => this.password = c} type='password' name='username' />
                        <button>登陆</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById('test'))

    </script>
</body>

</html>

四、🌈受控组件

4.1、受控组件：随着你的输入维护状态，可以省掉ref(相vue的v-model)
请添加图片描述

<!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>hello_react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id='test'></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 引入react-dmo 用于react操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>


    <!-- 此处一定要写babel -->
    <script type="text/babel">


        // 受控组件 随着你的输入维护状态
        
        // 1.创建组件
        class Login extends React.Component {
            //初始化状态
            state = {
                username: '',//用户名
                password: ''//密码 
            }

            saveUsername = (event) => {
                console.log(event.target.value);
                this.setState({ username: event.target.value })

            }


            savePassword = (event) => {
                console.log(event.target.value);
                this.setState({ password: event.target.value })

            }

            handleSubmit = (event) => {
                event.preventDefault()//阻止表单提交
                const { username, password } = this.state
                alert(`用户名：${username},密码：${password}`)
            }
            render() {
                return (
                    <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                        用户名:<input onChange={this.saveUsername} type='text' name='username' />
                        密码:<input onChange={this.savePassword} type='password' name='username' />
                        <button>登陆</button>
                    </form>
                )
            }
        }

        ReactDOM.render(<Login />, document.getElementById('test'))

    </script>
</body>

</html>