react form表单

╰半夏微凉° 2021-07-25 01:17 679阅读 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 条评论，679人围观）

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

相关阅读

相关 Form表单

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

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

相关表单＜form＞

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

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

相关 form表单

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

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

相关 form表单包含form表单的校验问题

表单内部表单校验问题当表单下面还嵌套表单的时候这个校验就不能走正常的校验了思路： 1.可以在外部表单校验之前先手动校验内部表单（适用于内部表单比较简单的情况），

朴灿烈づ我的快乐病毒、/ 2022年12月17日 08:49/ 0 赞/ 223 阅读

相关 react antd form 表单清空

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

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

相关 Form-Form表单

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

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

相关 form表单

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

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

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

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

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

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

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

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

相关 react form表单

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

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