antDesign表单getFieldDecorator

1)getFieldDecorator是一个方法,这个方法接收两个参数,第一个是表单的字段对象,第二个是验证规则。这个方法本身返回一个方法,需要将需要获取值的标签包裹进去。

const formItemLayout = {
    labelCol: {
        span: 12,
    },
    wrapperCol: {
        span: 12,
    },
};

<From> <FormItem> //JS代码书写时需要用 { } 包裹起来,不能直接写在代码块中 { getFieldDecorator('userName',{ initialValue:'Jack', rules:[] })( <Input placeholder='请输入用户名'/> ) } </FormItem> <Form.Item {...formItemLayout} label={'名称'}> {getFieldDecorator('searchName', { rules: [{ required: true, message: '请输入菜品名称' }], })( <Input placeholder={'请输入名称'} /> )} </Form.Item> </From>
okHandle = () => {//提交表单时的校验
        const { form } = this.props;
        form.validateFields((err, fieldsValue) => {
            console.log(err, fieldsValue);
            if (err) return;
            const { searchName = '' } = fieldsValue;
        })
    };

第一个参数是用户自定义的、用于识别该控件的变量名,这样便于在获取或设置该控件的值。
2019.3.12补充:值得注意的是,getFieldDecorator是一个非常智能的方法,它可以获得自定义组件的value值,在提交表单时会很方便。其次,initialValue的值会覆盖子组件中的placeHolder,如果子组件是下拉框,也会根据initialValue的值来匹配自己的value,并显示相应的值,可以说非常智能了。

2)在提交表单或是与后端交互时,如果需要一个控件的值,那么就用this.props.form.getFieldValue('变量名')的方式进行获取,注意:‘变量名’这个参数只能由getFieldDecorator所设定的。

注意:getFieldValue不能获取没有使用getFieldDecorator绑定的控件(即:如果控件值标注了id属性,用这个方法无效)。应使用document.getElementById("id名").value的方式进行获取值。

3)setFieldValue

setFieldsValue({
                    location_latitude: point.lat,
                    location_longitude: point.lng,
                  });

参考:https://www.cnblogs.com/tian874540961/p/10237713.html

https://blog.csdn.net/weixin_30355437/article/details/97438496

原文地址:https://www.cnblogs.com/dongxiaolei/p/13991465.html