10 react表单操作（未封装版）喜欢点赞加关注！谢谢

import React, { Component } from "react"
import { log } from "util";
export default class Form extends Component {constructor() {super()this.state = {user: {//要提交给后端的数据  起名字后端叫什么我们也叫什么username: '',password: '',sex: '',profession: "",hobby: [],des: '',isAgree: false},jobs: [//职业的类型{label: '杏仁',value: 'xingr'},{label: '杏子',value: 'xingz'},{label: '杏花',value: 'xingh'},{label: '杏壳',value: 'xingk'}],hobby: [{title: '喝酒',value: 'drink',checked: false},{title: '抽烟',value: 'smoking',checked: false}, {title: '烫头',value: 'tt',checked: false}, {title: '完',value: 'play',checked: false}]}}//用户名和密码的事件changeV (e, v) {this.setState({user: {...this.state.user,[v]: e.target.value}}, () => {console.log(this.state.user);})}// 性别changeR (e, v) {this.setState({user: {...this.state.user,[v]: e.target.value}}, () => {console.log(this.state.user);console.log(v, e.target.value);})}// 职业changeJ (e, v) {console.log('11');this.setState({user: {...this.state.user,[v]: e.target.value}}, () => {console.log(this.state.user);console.log(v, e.target.value);})}// 爱好changeH (e, attr, index) {//取出来（解构赋值）const { hobby } = this.state// 修改hobby[index][attr] = e.target.checked// 筛选 并且取出value值var h = hobby.filter((item) => { return item.checked }).map((item) => { return item.value })this.setState({user: {...this.state.user,hobby: h}}, () => {console.log(this.state.user);})}changeT(e,v){this.setState({user:{...this.state.user,[v]:e.target.value}})}changeG(e,v){this.setState({user:{...this.state.user,[v]:e.target.checked}},()=>{console.log(this.state.user);})}submit(){console.log(this.state.user);}render () {return (<div><h1>表单元素的获取</h1><p>账号: <input type="text" onChange={(e) => this.changeV(e, 'username')} /></p><p>密码: <input type="text" onChange={(e) => { this.changeV(e, 'password') }} /></p><p>性别: <input type="radio" onChange={(e) => { this.changeR(e, 'sex') }} name='sex' value='0' />男<input type="radio" onChange={(e) => { this.changeR(e, 'sex') }} name='sex' value='1' />女</p><p>职业：<select onChange={(e) => { this.changeJ(e, 'profession') }}><option value="" disabled>---请选择---</option>{/* <option value="xingren">杏仁</option><option value="xingke">杏壳</option><option value="xinghua">杏花</option> */}{this.state.jobs.map(item => {return <option key={item.value} value={item.value}>{item.label}</option>})}</select></p><p>爱好：{/* <span><input type="checkbox" />喝酒</span><input type="checkbox" />抽烟<input type="checkbox" />烫头<input type="checkbox" />吃饭 */}{this.state.hobby.map((item, index) => {return (<span key={index}><input onChange={(e) => { this.changeH(e, 'checked', index) }} value={item.value} type="checkbox" />{item.title}</span>)})}</p><p>备注：<textarea cols="30" rows="10" onChange={(e)=>{this.changeT(e,'des')}}></textarea></p><p><input type="checkbox" onChange={(e)=>{this.changeG(e,"isAgree")}}/>我同意</p><p><button onClick={this.submit.bind(this)}>提交</button></p></div>)}
}

10 react表单操作（未封装版）喜欢点赞加关注！谢谢相关推荐

AngularJS表单操作几个例子(表单提交,表单编辑默认值)
听同事讲AngularJS比jquery还要强大一些于时就开始了AngularJS学习工作,但在学习AngularJS中发现对于表单提交与表单默认值都不会搞,下面来看看几个关于AngularJS Fo ...
SharePoint：扩展DVWP - 第34部分：使用图标形式的表单操作链接
上一次,我们对我们的DVWP的外观进行了最后的加工,实现了下图中 1-5 的部分.这一次,我们将继续完成剩下的6 和 7 ,来为其添加一个图标. 在本系列中间的部分,Greg Schaefer提了一个 ...
Selenium自动化测试框架基础学习（元素表单操作）（Selenium操作）
目录一.Selenium自动化测试框架 1.1什么是框架? 1.2为什么使用框架? 1.3Selenium-webdriver工作原理 1.4selenium环境搭建(详情查阅讲义) 1.5什么是S ...
下面关于表单的叙述错误的是_下面是关于表单数据环境的叙述，其中错误的是A．可以在数据环境中加入与表单操作有关的表B．数据环...
(文)已知等比数列{xn}的公比是不为1的正数,数列{yn}满足yn?logxna=2(a>0,a≠1),当y4=15,y7=9时,数列{yn}的前在等差数列{an}中,若an<0,a2 ...
JQuery入门常用的一些方法、表单操作、正则验证
获取一组radio被选中项的值 var item = $('input[@name=items][@checked]').val(); 获取select被选中项的文本 var item = $(&qu ...
Vue常用特性——表单操作、表单域修饰符（number：转化为数值；trim：去掉开始和结尾的空格； lazy : 将input事件切换为change事件）||自定义指令|| 局部指令
Vue常用特性常用特性概览 <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
开源免费OA教程：移动端工作表单操作条的使用方法
O2OA移动端工作页面目前支持在App.钉钉.企业微信.微信公众号.小程序.UniApp.华为Welink等等各种移动端解决方案中使用. 操作条先说下操作条是个啥. 咱们O2OA的流程表单设计器是一 ...
Flask 表单操作库 flask_WTF flask_WTForms
一.安装 flask_WTF 0.14.X flask_WTF 英文文档 flask_WTF 中文文档0.12 Flask表单验证组件WTForms Flask-WTF ...
简单的form表单操作的几种写法
为什么80%的码农都做不了架构师?>>> function save(){var name = $('#name').val();var email = $('#email') ...

10 react表单操作（未封装版）喜欢点赞加关注！谢谢

10 react表单操作（未封装版）喜欢点赞加关注！谢谢相关推荐

最新文章

热门文章

10 react表单操作（未封装版） 喜欢点赞加关注！谢谢

10 react表单操作（未封装版） 喜欢点赞加关注！谢谢相关推荐

最新文章

热门文章

10 react表单操作（未封装版）喜欢点赞加关注！谢谢

10 react表单操作（未封装版）喜欢点赞加关注！谢谢相关推荐