react--学习笔记6（收集表单--受控组件和非受控组件例子）

短命女 2022-11-26 15:55 165阅读 0赞

## **收集表单数据** ##

**这里主要是说受控组件与非受控组件：**

*  受控组件: 表单项输入数据能自动收集成状态（这里为密码，可以用react的插件看到，随着密码输入，一直在改变）
 *  非受控组件: 需要时才手动读取表单输入框中的数据（这里为用户名，只有用的时候调用）

这里还是按照我的惯例，写俩种方式;

Hbuilder:

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>收集表单数据</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/prop-types.js"></script>
    		<script type="text/javascript" src="js/babel.min.js"></script>
    		<script type="text/babel">
    //      需求: 自定义包含表单的组件
    // 		 1. 输入用户名密码后, 点击登陆提示输入信息
    //		2. 不提交表单
    		class LoginForm extends React.Component{
    			constructor (props){
    				super(props)
    				this.state={
    					pwd:''
    				}
    				this.handleChange=this.handleChange.bind(this)
    				this.handleSubmit=this.handleSubmit.bind(this)
    			}
    			handleChange(event){
    				//读取值
    				const pwd =event.target.value
    				//更新值得状态
    				this.setState({pwd})
    			}
    			handleSubmit(event){
    				const name =this.addInput.value
    				const pwd =this.state
    				alert(`准备提交用户名为${name},密码${pwd}`)
    				//alert(name)
    				//阻止事件的默认行为
    				event.preventDefault()
    			}
    			render(){
    				return(
    				<form action="/test" onSubmit={this.handleSubmit}>
    				用户名:<input type='text' ref={input => this.addInput = input}/>  
    				密码:<input type='password' value={this.state.pwd} onChange={this.handleChange}/>  
    				<input type='submit' value='登录'/>
    				</form>
    				)
    			}
    		}
    		ReactDOM.render(<LoginForm />,document.getElementById('test'))
    		</script>
    	</body>
    </html>

![20200812161005344.gif][]

Vscod

import React from 'react'
    
    export default class LoginForm extends React.Component{
        constructor (props){
            super(props)
            this.state={
                pwd:''
            }
            this.handleChange=this.handleChange.bind(this)
            this.handleSubmit=this.handleSubmit.bind(this)
        }
        handleChange(event){
          const pwd =event.target.value
          this.setState({pwd})
        }
        handleSubmit(event){
          const name = this.nameInput.value
          alert(name)
    
            //阻止默认跳转
            event.preventDefault()
        }
        render(){
            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>
            )
        }
    }

结果和上方一致

[20200812161005344.gif]: /images/20221124/8d79c8520b45402d97ad3e2fc3a84554.png