表单设计器antd

react没有v-model这种双向绑定指令。所以要想实现双向绑定，就需要给输入框一个默认的value，并且通过change监听事件去改变value来达到双向绑定的目的。

在antd的表单组件中。如果给每个item组件设置了name。那么就不需要去手动实现双向绑定了。只需要通过

form.setFieldsValue方法。将对应的数据传过去。from组件就会根据对应的name和字段名来双向绑定。

可以通过Form.useForm()来拿到整个from对象。

form.resetFields()方法可以重置整个表单的数据。

form.validateFields()触发表单验证，并返回表单数据。

在使用antd的日期组件时，发现直接给组件指定年月日的日期格式的数据时，会报错 date.clone方法未定义。官网指明，antd的日期组件是依赖moment库实现的，并且指定默认值的时候也需要传入moment格式的日期。所以只需要将需要传入的日期用momentI()方法转一下格式就行了

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; 获取表单的双向绑定函数

<Form>

<Card title={"基本信息"}>

    <Row gutter={24}>

        <Col span={8} offset={4}>

            <Form.Item label={"通票首重重量"}>

                {getFieldDecorator('firstWeight')(<Input placeholder={"首重重量KG"}/>)}

            </Form.Item>

        </Col>

        <Col span={8}>

            <Form.Item label={"通票首重价格"}>

                {getFieldDecorator('firstWeightPrice')(<Input placeholder={"首重价格(元)"}/>)}

            </Form.Item>

        </Col>

    </Row>

</Card>

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})(<Input placeholder={"首重重量KG"}/>)}

解决

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

<Form.Item label="" style={{marginBottom:0}}>

    {getFieldDecorator('select_tas', {

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

    initialValue:DEFAULT_TIMEAREA[0]

})(

<Select id={"tas"} style={{width:'100%' }}>

{timeArea ?timeArea.map(({ value, text }) =><Option key={'time' + value} value={value}>{text}</Option>) :null}

</Select>

)}

</Form.Item>

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

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

class SelectBarextends Component{

    ...  

    //选中时调用提交表单

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

 }

}