react学习笔记--组件__收集表单数据（受控组件和非受控组件）

最新推荐文章于 2022-03-22 16:48:32 发布

家里有蜘蛛

最新推荐文章于 2022-03-22 16:48:32 发布

阅读量198

点赞数 1

分类专栏： # React学习笔记

本文链接：https://blog.csdn.net/qq_44983621/article/details/100940561

版权

React学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

react学习笔记–组件__收集表单数据

下面为效果图

在这里插入图片描述

在输入时收集表单的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="example"></div>
    
    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/prop-types.js"></script>
    <script src="../js/babel.min.js"></script>
    
    <script type="text/babel">
        class LoginForm extends React.Component{
            constructor(props){
                super(props);
                this.state ={
                    pwd :''
                }
               this.handleChange = this.handleChange.bind(this);
                this.handleSubmit = this.handleSubmit.bind(this);
            }
            handleSubmit(event){
                const name = this.nameInput.value;
                //阻止浏览器的默认行为--提交
                event.preventDefault();
                alert(`准备提交的用户名为${name},密码为${this.state.pwd}`);
            }
            handleChange(event){
                //读取输入的值
                //更新pwd的状态
                const pwd = event.target.value;
                this.setState({pwd});
            }
            /*
            第二种方法
                handleChange(event){
                    //读取输入的值
                    //更新pwd的状态
                    // const pwd = event.target.value;
                    const pwd = this.pwdInput.value;
                    // alert(pwd);
                    this.setState({pwd});
                }
                密码： <input type="password" ref = {input => this.pwdInput = input} onChange = {this.handleChange}/>
            */
            render(){
                //受控组件和非受控组件  onChange 是 实时读取表单内容的一个属性
                return(
                    <form action="/test" onSubmit = {this.handleSubmit}>
                        用户名：<input type="text"  ref = {input => this.nameInput = input} />
                        密码：<input type="password" value ={this.state.pwd} onChange ={this.handleChange}/>
                        <input type="submit" value = "登录" />
                    </form>
                )     
            }
            // 密码：<input type="password" value =onChange{this.state.pwd} onChange ={this.handleChange}/>
            // 密码：<input type="password" ref = {this.handleChange}/>   两种写法一样 第一个是非受控组件，第二个是受控组件
            //
            // 官方推荐使用受控组件 而且不要过度使用refs  但是效果其实差不多
        }
        ReactDOM.render(<LoginForm/>,document.getElementById('example'))
    </script>
</body>
</html>

家里有蜘蛛

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react学习笔记--组件__收集表单数据（受控组件和非受控组件）

react学习笔记–组件__收集表单数据下面为效果图在输入时收集表单的数据<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
复制链接

扫一扫