问题描述: 在antd表单中,当将Upload组件作为Dragger使用时,this.props.form.field.isFieldTouched无法按预期工作。
解决方法: 为了解决这个问题,我们需要手动设置字段的touched状态,以便在Upload组件中正确使用isFieldTouched方法。
首先,我们需要在表单的constructor中初始化字段的touched状态为false。然后,在Upload组件的onChange回调中,将字段的touched状态设置为true。
以下是一个示例代码:
import { Form, Upload, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
class MyForm extends React.Component {
constructor(props) {
super(props);
this.state = {
// 初始化字段的touched状态为false
isUploadTouched: false,
};
}
handleUploadChange = (info) => {
if (info.file.status === 'done') {
// 将字段的touched状态设置为true
this.setState({ isUploadTouched: true });
}
};
render() {
const { getFieldDecorator } = this.props.form;
return (
{getFieldDecorator('upload', {
rules: [{ required: true, message: 'Please upload a file!' }],
})(
Click or drag file to this area to upload
)}
);
}
}
const WrappedMyForm = Form.create()(MyForm);
在上述代码中,我们使用了一个名为isUploadTouched的状态变量来跟踪Upload组件是否被触摸。当Upload组件的onChange事件触发时,如果上传状态为'done',则将isUploadTouched设置为true。
然后,我们在提交按钮的disabled属性中使用了isUploadTouched来禁用按钮,以确保只有当Upload组件被触摸并且没有错误时才能提交表单。
这样,我们就能够正确地使用isFieldTouched方法来检查Upload组件是否被触摸了。