import React, { PureComponent } from 'react'
import { Button, Form, Input, Radio } from 'antd'
import FormItem from 'components/FormItem'
const RadioGroup = Radio.Group
const options = [
{ label: '男', value: 1 },
{ label: '女', value: 2 },
]
class Test extends PureComponent {
handleSubmit = (e) => {
e.preventDefault();
const { form: { validateFields } } = this.props;
validateFields((errors, values) => {
if (errors) {
return;
}
console.log(values)
})
}
render() {
const { form: { getFieldDecorator } } = this.props
const nameDecorator = getFieldDecorator('name')
const sexDecorator = getFieldDecorator('sex')
return (
<section>
<Form layout="horizontal" onSubmit={this.handleSubmit}>
<FormItem label="姓名">
{nameDecorator(<Input />)}
</FormItem>
<FormItem label="年龄">
{sexDecorator(<RadioGroup options={options} />)}
</FormItem>
<FormItem buttonsContainer>
<Button type="primary" size="default" htmlType="submit">提交</Button>
</FormItem>
</Form>
</section>
);
}
}
export default Form.create()(Test)
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Button, Icon, Input } from 'antd'
import './index.scss'
class InputArray extends PureComponent {
constructor(props) {
super(props)
}
handleChange = index => {
const { value, onChange } = this.props
const newValue = [...value]
newValue[index] = target.value
onChange(newValue)
}
handleDelete = e => {
const target = e.currentTarget
const index = target.parentNode.parentNode.firstChild.dataset.index
const { value, onChange } = this.props
const newValue = [...value]
newValue.splice(Number(index), 1)
onChange(newValue)
}
handleAdd = () => {
const { value, onChange } = this.props
const newValue = [...value, '']
onChange(newValue)
}
render() {
const { value, ...others } = this.props
const closeBtn = <Icon type="close-circle" onClick={this.handleDelete} />
return (
<div className="input-array-component">
{value.map((v, i) => {
return (
<div key={i}>
<Input
{...others}
value={v}
suffix={closeBtn}
data-index={i}
onChange={() => this.handleChange(i)}
/>
</div>
);
})}
<div>
<Button type="dashed" icon="plus" onClick={this.handleAdd}>添加</Button>
</div>
</div>
);
}
}
InputArray.defaultProps = {
value: []
}
export default InputArray
<FormItem label="姓名">
{nameDecorator(<InputArray />)}
</FormItem
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有