react 封装表格组件_React--封装的表单组件

var Form = React.createClass({

getInitialState(){

return {

uname:'',

upass:''

}

e.preventDefault();

this.props.handler(this.state)

//将输入的值给state

changeValue(e){

const target = e.target

const value = target.type==='checkbox'?target.checked:target.value

const name = target.name

this.setState({

[name]:value

})

render(){

return (

用户名:

密码:

提交

)

}

})

组件中使用方法：

组件中使用的时候传一个handler方法便可

var Login = React.createClass({

console.log(state.uname,state.upass)

render(){

return (

登陆

)

}

})

react 封装表格组件_React--封装的表单组件相关推荐

小程序学习之小程序组件（三）表单组件
1.button 按钮组件组件的属性: 1)size属性 default 默认值宽度与手机屏幕宽度相同 mini 迷你型,按钮尺寸.字号都比普通按钮小 2)t ...
微信小程序常用表单组件
微信小程序常用表单组件 1.常用表单组件 1.1 button 1.2 checkbox 1.3 input 1.4 label 1.5 form 1.6 radio 1.7 slider 1.8 s ...
手牵手教你使用ngComponentOutlet创建一个支持自定义插入子组件的angular公共搜索表单组件
目录雏形主体逻辑完善使用公共表单组件总结最后这几天笔者所接手的angular项目需要重新封装一个公共表单组件,由于之前封装的表单组件自由度不够,每出现一种新的类型的特殊输入框就需要在公共 ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
基于elementUI封装了基础表单组件
开头先BB两句 elementUI的表单组件,自带表单验证规则.虽然已经很方便了,但是我还是想封装一下. 通常用到的表单类型,主要包括:Radio 单选框,输入框,下拉框. 我封装了一个基础组件.把这 ...
首页仪表盘echart_封装万能表单组件
element ui 组件下Layout布局复制到Home.vue <el-row :gutter="20"><el-col :span="6" ...
使用vue表单验证库async-validator封装Form表单组件
src/components/data/seller/create/contract.vue <template><create-portlet title="合同信息&q ...
vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件生成 Maker let rule = [ formCreat ...
实现Ant Design 自定义表单组件
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...

react 封装表格组件_React--封装的表单组件

react 封装表格组件_React--封装的表单组件相关推荐

最新文章

热门文章