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

最新推荐文章于 2023-12-06 22:40:40 发布

ABU_MOlI_ITUI

最新推荐文章于 2023-12-06 22:40:40 发布

阅读量152

点赞数

分类专栏： react 文章标签： reactjs

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107957409

版权

react 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

收集表单数据

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

受控组件: 表单项输入数据能自动收集成状态（这里为密码，可以用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}/>&nbsp;&nbsp;
				密码:<input type='password' value={this.state.pwd} onChange={this.handleChange}/>&nbsp;&nbsp;
				<input type='submit' value='登录'/>
				</form>
				)
			}
		}
		ReactDOM.render(<LoginForm />,document.getElementById('test'))
		</script>
	</body>
</html>

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>
        )
    }
}

结果和上方一致

ABU_MOlI_ITUI

关注

0
点赞
踩
0

收藏

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

收集表单数据这里主要是说受控组件与非受控组件：受控组件: 表单项输入数据能自动收集成状态（这里为密码，可以用react的插件看到，随着密码输入，一直在改变）非受控组件: 需要时才手动读取表单输入框中的数据（这里为用户名，只有用的时候调用）这里还是按照我的惯例，写俩种方式;Hbuilder:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>收集
复制链接

扫一扫