在react中获取表单数据方式比较多,可以就通过监听input
value的oncChange
动态修改state里面对应的参数值。
<input id="name" type="text" value={this.state.name} onChange={this.getValues} />
<br />
如果表单数据比较多10个参数这样一个一个的获取就会比较麻烦,那么通过antd的Ui插件就可以轻松实现,类似与实现serialize()
表单序列化。
基本上做react项目的人大部分都会用到Antd 的UI框架。所以,我再总结一下单独使用。
看个效果图
代码实现,引用到的组件有:
import React, {Component} from 'react';
import {Form, Input, Button, Radio, Upload, Icon, message} from 'antd';
const FormItem = Form.Item;
const {TextArea} = Input;
const SeoCreateForm = Form.create()(
(props) => {
const {form} = props;
const {getFieldDecorator} = form;
const saveFormData = () => {
form.validateFields((err, values) => {
if (err) {
return;
}
console.table(values);
// 在这里执行保存到服务器的操作使用axios
message.success('保存成功!')
});
}
return (
<div className="new-wrap">
<Form layout='vertical'>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="网站标题:">
{getFieldDecorator('webName', {
rules: [{required: true, message: '请填写网站的标题'}],
})(
<Input placeholder="请准确填写网站的标题"/>
)}
</FormItem>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="关键词:"
>
{getFieldDecorator('keywords', {
rules: [{required: true, message: '请填写网站的标题'}],
})(
<Input placeholder="请准确填写网站被搜索时的关键词以逗号分隔"/>
)}
</FormItem>
<FormItem
labelCol={{span: 2}}
wrapperCol={{span: 12}}
label="站长统计:"
>
{getFieldDecorator('friendshop')(
<TextArea rows={3} placeholder="请将百度统计或站长统计的数据统计所用代码复制/粘贴进来"/>
)}
</FormItem>
<Button type="primary" onClick={saveFormData}>保存</Button>
</Form>
</div>
)
}
)
class SeoBetter extends Component {
render() {
return (
<div>
<SeoCreateForm/>
</div>
)
}
}
export default SeoBetter;
稍微解释一下:这里必须通过Form.create()
来创建表单组件,因为要用到antd已经封装好的form.validateFields()
函数来获取表单数据。
只需要给button 添加点击事件,获取数据就可以了。
如果看不明白就看这里的api参数说明比较易懂。 antd-Form.create()