布吉网站建设技术托管,广西网站建设培训,教学平台网站开发,西安网站推广建设最近的需求#xff0c;两个下拉框是必填项#xff0c;点击上传按钮#xff0c;如果有下拉框没选要有提示#xff0c;如图 如果直接使用antd的Upload组件#xff0c;一点击文件选择的窗口就打开了#xff0c;哪怕在Button里再加点击事件#xff0c;也只是#xff08;几乎…最近的需求两个下拉框是必填项点击上传按钮如果有下拉框没选要有提示如图 如果直接使用antd的Upload组件一点击文件选择的窗口就打开了哪怕在Button里再加点击事件也只是几乎同时处理两个方法beforeUpload更是不行文件都选择完了才执行。
在网上查找终于看到这位vue选手的一个思路两个同位置同样式的按钮按某个state切换
AntD框架上传文件前校验信息选择文件前进行内容校验并提示
改成react写法把除了文件以外的payload获取放到beforeUpload里
const [uploadData, setUpLoadData] useState(null);
const [selectMonth, setSelectMonth] useState(false);
const [selectaaa, setSelectaaa] useState(false);const handleBeforeUpload file {if (!/.xls?$/.test(file.name) !/.xlsx?$/.test(file.name)) {message.error(...);return false;}form.validateFields((err, fieldsValue) {if (err) return;const month moment(fieldsValue.month).format(YYYY-MM);setUpLoadData({...fieldsValue, month: month});});return true;
};
组件里加onChange监听
FormItem label月份 {...formItemLayout} {getFieldDecorator(month, {rules: [{ required: true, message: 请选择月份 }],})(MonthPicker onChange{value value ? setSelectMonth(true) : setSelectMonth(false)}/)}
/FormItem
最后上传按钮那边做两个按钮用最上面定义的两个state来确定展示哪个按钮validate里调用form.validateFields方法做必填提示
{selectDepartment selectMonth ? (Uploadaction{uploadUrl}data{uploadData}showUploadList{false}onChange{handleUpload}beforeUpload{handleBeforeUpload}withCredentialsheaders{}Button typeprimary style{}Icon typecloud-upload / 上传数据 /Button/Upload
) : (Button typeprimary style{} onClick{()validate()}Icon typecloud-upload / 上传数据 /Button )
}
就可以做到最开始提到的效果啦。
又看到一篇文章https://zhuanlan.zhihu.com/p/590018131?utm_id0可以更优雅地监听form不用再使用onChange方法和useState改完发现自己项目antd版本太低了用不了从antd4.20.0 开始antd Form 添加了一个新的 API -Form.useWatch
const [form] Form.useForm();
const aaa Form.useWatch(aaa, form);
const month Form.useWatch(month, form);
在form item标签里加上name属性
FormItem label月份 {...formItemLayout} namemonth
效果应该是一样的。
另外发现使用dataform格式post方法上传文件其他数据参数不需要用new FormData()再append进去了直接传字典就行。
