输入框之间的联动+form表单编辑的提交取消+form表单校验
需求：
输入框1选择之后，输入框2会清空当前选项，根据输入框1的内容，输入框2个下拉选项有所改变。
编辑页面
1、页面初始化
// 编辑页,初始化的值
useEffect(() => {
props.searchKpiDetail({
rcmId: query.rcmId || '',
}).then(
(res) => { 接口套娃，在res的花括号下面
searchForm.setFieldsValue({
rcmId: _.get(res, ['data', 'rcmId'])，
kpiAdmin: _.get(_.get(res, 'data'), 'kpiAdminList') &&
//kpiAdminList: ["吴阳(0127)", "张博(01358)"]
(_.get(_.get(res, 'data'), 'kpiAdminList') ).toString(), //吴健阳(0127),张博(01358)
companyScopeObj: _.get(_.get(res, 'data').companyScopeObj, 'key'),
departScopeObj: _.get(_.get(res, 'data').departScopeObj, 'key'),
});
props.save({ alertList: res.data.configs });
setAllData(_.get(res, 'data'));
//接口2
props.searchDepartScope({ key: _.get(_.get(res, 'data').companyScopeObj, 'key') })
.then(
(resp) => { //根据输入框1的选项，取到输入框2的下拉选项的数组
setDepartList(_.get(resp, 'data'));
});
},
);
}, [query && query.rcmId]);//rcmId只要变化，就会执行2、提交
// 编辑的时候校验，编辑的保存
const baseEdit = () => {
searchForm.validateFields().then((values) => {
const {
rcmId,
companyScopeObj,
departScopeObj,
} = values;
props.editKpiBasic({
rcmId,
companyScope: companyScopeObj,
departScope: departScopeObj,
}).then();
message.success('基本信息编辑成功！');
});
};3、 输入框1的回调事件，输入框1选中，输入框2置空，同时下拉选项更新
const handleOptChange = (obj) => { //输入框1的回调事件
searchForm.setFieldsValue({ // 点击输入1的回调时，置空输入框2的name值
departScopeObj: '',
});
props.searchDepartScope({ key: _.get(obj, 'companyScopeObj') }).then((resp) => {
setDepartList(_.get(resp, 'data')); //根据输入框1的选项，取到输入框2的下拉选项的数组
});
};4、form表单重置修改内容
const handleOver = () => {
searchForm.resetFields(); //置空编辑的表单内容
};return内容
return ...