记Antd组件-Form简单使用步骤

1.引入from组件

import {Form} from "antd";

2.在组件上方使用@Form.create()注解注入表单,注入后可以通过this.props.form获取

@Form.create()

export default class CountPageextends Component{

     ....

}

3.通过const {getFieldDecorator} = this.props.form; 获取表单的双向绑定函数

    

        

            

                {getFieldDecorator('firstWeight')()}

            

        

        

            

                {getFieldDecorator('firstWeightPrice')()}

            

        

    

4.编写函数获得表单内的值

submit = ()=>{

    const data =this.props.form.getFieldsValue();

    console.log("表单中的值",data)

}

补充：

1.

报`getFieldDecorator` will override `value`, so please don't set `value` directly and use `setFieldsValue` to set it.错误的话，因为getFieldDecorator可以设置默认值，会替换input的默认值。

{getFieldDecorator('xxx',{initialValue:1})()}

解决

2.双向绑定过程中对表单内容校验

    {getFieldDecorator('select_tas', {

    rules: [{required:true,message:DEFAULT_TIMEAREA[1] }],

    initialValue:DEFAULT_TIMEAREA[0]

})(

{timeArea ?timeArea.map(({ value, text }) =>

{text}) :null}

)}

3.表单内容改变时动态更新

@Form.create({onValuesChange:(props, changedValues, allValues) => {that.requestData(props, changedValues, allValues)}})

class SelectBarextends Component{

    ...  

    //选中时调用提交表单

    requestData = (props, changedValues, allValues) =>{

 }

}