this.props.form.field.isFieldTouched在antd形式Upload.Dragger中无法按预期工作

时间:2019-06-12 08:15:26

标签: reactjs antd

如果尝试触摸Upload File字段并且不包含文件,我想向用户显示错误消息,我想将其设置为必填字段。
问题是:我无法检查该字段是否被触摸/脏了。
函数isFieldTouched(位于this.props.form.filefield.isFieldTouched)给出undefined

import React, { Component } from 'react';
import {
    Form, Icon, Input, Button, Row, Col, DatePicker, Upload, Switch, Select
} from 'antd';

function hasErrors(fieldsError) {
  return Object.keys(fieldsError).some(field => fieldsError[field]);
}

class UploadPackageFormComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            fileList: [],
            isUploadPkgBtnLoadingState: false
        }
    }

componentDidMount = () => {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
};

componentWillReceiveProps = (nextProps) => {
    console.log(nextProps);
    this.setState({
        isUploadPkgBtnLoadingState: nextProps.isUploadPkgBtnLoadingState,
        fieldOptions:nextProps.fieldOptions
    });
};

handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
        if (!err) {
            console.log('Received values of form: ', values);
            // this.setState({isUploadPkgBtnLoadingState: true});
            this.props.setUploadPkgBtnLoading(true);
            var formData = this.props.form.getFieldsValue();
            const fd = new FormData();
            for (var key in formData){
                if(formData[key] !== undefined) {
                    fd.append(key, formData[key]);
                }
            }
            if(typeof(this.state.fileList) !== undefined && this.state.fileList.length > 0){
                fd.append('package', this.state.fileList[0]);
            }

            this.props.uploadPackage(fd);
        } else {
          alert(err);
        }
    });
}

render = () => {
    const {
        getFieldDecorator,
        getFieldsError,
        getFieldError, isFieldTouched,
    } = this.props.form;
    console.log('PROPS FORM', this.props.form);
    const {TextArea} = Input;
    const props = {
        multiple: false,
        style: {
            width: '100%'
        },
        onRemove: (file) => {
            console.log('file here',file);
            this.setState({fileList: []});
            debugger;
        },
        onRemoe: (file) => {
            console.log('file here',file);
            this.setState(({fileList}) => {
                console.log('yes', fileList);
                const index = fileList.indexOf(file);
                const newFileList = fileList.slice();
                newFileList.splice(index, 1);
                console.log('newFileList', newFileList);
                return {
                    fileList: newFileList,
                };
            });
        },
        beforeUpload: (file) => {
            this.setState(({fileList}) => ({
                fileList: [file],
            }));
            return false;
        },
        fileList: this.state.fileList,
        accept: '.zip'
    };

    // Only show error after a field is touched.
    const partNoError = isFieldTouched('part_number') && getFieldError('part_number');
    const fileError =  isFieldTouched('package') && getFieldError('package');

    return (
        <Form layout="vertical" onSubmit={this.handleSubmit}>
            <Row gutter={16}>
                <Col span={12}>
                    <Form.Item
                        label="Part Number"
                        validateStatus={partNoError ? 'error' : ''}
                        help={partNoError || ''}
                    >
                        {getFieldDecorator('part_number', {
                            rules: [{required: true, message: 'Please enter the part no!'}],
                        })(
                            <Input/>
                        )}
                    </Form.Item>
                    <Form.Item label='Package'
                      validateStatus={fileError ? 'error' : ''}
                      help={fileError || ''}
                    >
                        {getFieldDecorator('package', {
                          rules: [{required: true, message: 'Please upload a package!'}],
                        })(
                            <Upload.Dragger {...props}>
                            <p className="ant-upload-drag-icon">
                                <Icon type="inbox" />
                            </p>
                                <p className="ant-upload-text">Drop files here or Browse</p>
                            </Upload.Dragger>
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="Notes">
                        {getFieldDecorator('notes', {
                            rules: []
                        })(
                            <TextArea autosize={{minRows: 10, maxRows: 10}}/>
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={16} style={{marginTop: '20px'}}>
                <Col span={4}>
                    <Button
                        type="secondary"
                        onClick={() => this.props.handleCancel()}
                    >CANCEL
                    </Button>
                </Col>
                <Col span={4}>
                    <Button
                        className="stryker-btn"
                        type="primary"
                        htmlType="submit"
                        loading={this.state.isUploadPkgBtnLoadingState}
                        disabled={hasErrors(getFieldsError())}
                    >SUBMIT
                    </Button>
                </Col>
            </Row>
        </Form>
    );
}

}

导出默认的Form.create({name:'upload_file'})(UploadPackageFormComponent);

0 个答案:

没有答案