如果尝试触摸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);