react表单提交（实现提交时不刷新页面并一键获取到所有数据）

在react中获取表单数据方式比较多，可以就通过监听inputvalue的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()