react form表单

╰半夏微凉° 2021-07-25 01:17 697阅读 0赞

from表单
    	1、根据state设置input的值
    		当在input标签中使用value={this.state.xx}时，不能直接这样设置,需要配合onChange事件或readOnly属性才能直接设置
    
    	2、表单获取实时input中的value值
    		通过onChange事件来监听,当内容发送改变时,在事件
    		的回调函数中,通过event.target.value来改变state状态 
    		
    	3、表单提交
    		表单设置onSubmit事件,input 标签type='submit'来触发这个事件

代码示例:

import React,{ Component} from 'react'
    
    export default class User extends Component{ 
    
    	constructor()
    	{ 
    		super();
    		this.state={ 
    			uname:'jeff',
    			upwd:'223'
    		}
    	}
    
    	render(){ 
    		return (
    
    			<div>
    				<form onSubmit={ this.submit.bind(this)}>
    				<input type='text' name='u1' value={ this.state.uname}  onChange={ this.change.bind(this)}/>
    				<input type='text' name='u2' value={ this.state.upwd} onChange={ this.change2.bind(this)}/>		
    				<input type='submit' />
    				</form>
    			</div>
    
    		)
    	}
    	submit(event)
    	{ 
    		event.preventDefault()
    		console.log(this.state.uname+this.state.upwd);
    	}
    
    	change(event)
    	{ 
    		this.setState({ 
    			uname:event.target.value
    		})
    
    		
    	}
    	change2(event)
    	{ 
    		this.setState({ 
    			upwd:event.target.value
    		})
    
    	}
    
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，697人围观）

还没有评论，来说两句吧...

相关阅读

相关 Form表单

一、标签结构： <form>...</form> 二、普通文本框： <input type="text"> 三、密码输入框： <input type="passwor

太过爱你忘了你带给我的痛/ 2024年04月01日 15:17/ 0 赞/ 103 阅读

相关表单＜form＞

创建表单 `<form>` 标签用于创建供用户输入的 HTML 表单。 `<form>`标签的action属性的值指定了表单提交到服务器的地址。 `<form>`

亦凉/ 2024年03月29日 15:46/ 0 赞/ 102 阅读

相关 form表单

前后端交互流程： ![f8139f43d37f32797aad8c89c3ec5f28.png][] 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网

矫情吗；*/ 2023年09月30日 19:52/ 0 赞/ 7 阅读

相关 form表单

前后端交互流程： ![98a9393d26e8108f47fc83040ff442c9.png][] 表单在 Web 网页中用来给访问者填写信息，从而能采集客户端信息，使网

忘是亡心i/ 2023年09月27日 15:10/ 0 赞/ 152 阅读

相关 react antd form 表单清空

关于react\_antd\_desgin的学习这两天也是获取到的知识零零散散，大多在网上也能获取的到，所以隔了很长的时间，没有编写关于react相关的文章。今天之所以写也是因

深藏阁楼爱情的钟/ 2022年08月28日 13:47/ 0 赞/ 285 阅读

相关 Form-Form表单

一、典型表单在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Check

灰太狼/ 2022年03月31日 15:11/ 1 赞/ 644 阅读

相关 form表单

Form表单 ajax基础 form表单的属性action与method 属性值描述 action URL 规定当提交表单时向何处发送表单数据 meth

浅浅的花香味﹌/ 2022年02月22日 20:06/ 0 赞/ 467 阅读

相关 react 封装通用组件之form表单

react 常用组件API调用的模块化封装–form组件 -------------------- > 工作中发现我们在做react后台管理系统的时候，会有大量重复的页

灰太狼/ 2021年12月10日 10:31/ 0 赞/ 909 阅读

相关 React组件Form表单事件调用

前言： |ू･ω･` ) 问题是这样的：在子组件代码中将Form表单create了之后在父组件中调用了子组件并增加了ref 可是我使用

小鱼儿/ 2021年11月05日 21:28/ 0 赞/ 447 阅读

相关 react form表单

from表单 1、根据state设置input的值当在input标签中使用value={this.state.xx}时，不能直接这样设置,需要配

╰半夏微凉°/ 2021年07月25日 01:17/ 0 赞/ 698 阅读