antd 3.x和4.x的区别

1.Button

1）antd 4.x版本以上没有Button.Group，如果需要按钮在一排并设置间距可以利用Space组件套在buttons按钮外层

2）Button里面自定义图标

3.x

<Button>

                        <Icon type="upload" /> 选择

                      </Button>

4.x

<Button style={{

                                    'left': '25px'

                                }}

                                icon={<UploadOutlined />}>

                                    选择文件

                                 </Button>

其中图标UploadOutlined 是从import { UploadOutlined } from '@ant-design/icons';

2.Form的改变

1）设置name和initvalue以及rules

3.x版本如下：

<Form  {...formItemLayout} >
            <Form.Item colon={false} hasFeedback label="名称" style="">
              {
                getFieldDecorator('proName', {
                  rules: [
                    { required: true, message: '请输入名称' },
                  ]
                })(<Input placeholder="" autocomplete="off" />)
              }
            </Form.Item>

4.x版本如下：

<Form
     {...formItemLayout}
     form={form}>
     <Form.Item
     label="工程名称"
     name="proName"
     initialValue={projectDetailData.name}
     rules={[
         { message: '请输入工程名称' },
     ]}
     >
         <Input placeholder="" />
      </Form.Item>

==》不在支持getFieldDecorator写法，均放在Form.Item属性上

2）提交时获取各个item的value值

3.x版本

conformHandle = () => {

    this.props.form.validateFields(async(err, values) => {

      if (!err || Object.keys(err).length == 0) {

        // 新建工程提交

        await createProject(values)

4.x版本

 //提交

    const handleSubmit = async () => {

        await form.validateFields();

        if(!is_editProject) {

            try {

                let params = { ...form.getFieldsValue() };  

                await createProject(params)

或者

<Form

                onFinish={this.onFinish}

                onFinishFailed={this.onFinishFailed}

                {...layout}

                layout="horizontal"

                initialValues={{ size: this.state.componentSize }}

                onValuesChange={this.onFormLayoutChange}

                size="small"

            >

onFinish = (values) => {

        console.log('Success:', values);

   };