产品说需要判断整个表单的数据 如果只有某两个值变化不会走这个逻辑,其他值变化了那就需要走这个逻辑
如果使用的antd 的from ,可以直接进行整个表单的数据监听onchange,判断这个key 是否是排除之外的值 如果不是则给haschange 打上标记但是这次 他没有使用 antd 的 form 组件 全局使用类组件进行,
我们可以重写setState 方式,只要他调用我们的setState参数 则 进行haschange打标记
js
// 重写setState 方法在我们的构造函数生命周期中
const that = this as any;
// 保存原生的setState引用
that._setState = this.setState.bind(this);
// 自定义setState方法以追踪变化
this.setState = (newState, callback) => {
// 深比较新旧状态,找出变化的key
const keysChanged = Object.keys(newState).filter(key => newState[key] !== this.state[key]);
if(!this.isFirst){
/* 如果除了竟媒信息/名称发生改变则需要给予提示信息 */
const filterList = keysChanged?.filter(item=>(item!=='xxx' && item!=='xxx' && item!=='xxx'))
if(filterList?.length>0){
this.hasChanged = true
}
}
// 调用原始的setState方法更新状态
that._setState(newState, () => {
if (callback) {
callback();
}
// 这里可以添加更多基于状态变化的操作
});
};
js
// 在 componentdidiUpdate 中判断 当前页面state 数据是否已经稳定
/* 某个最后一次更新的数据 xxxxx 目前是最后一个更新的 判断数据是否已稳定 稳定则不再执行 开启监听state变化 */
if(this.isFirst){
const isEqual = checkJonsEqual(prevState,this.state,['xxxx'])
if(isEqual){
this.isFirst = false
}
}
js
/**
*
* @param preJson json1
* @param nextJson json2
* @param exceptList 排除的字段
*/
export const checkJonsEqual = (preJson, nextJson, exceptList = []) => {
const preJsonObj = _.cloneDeep(preJson);
const nextJsonObj = _.cloneDeep(nextJson);
for (let i = 0; i < exceptList.length; i++) {
delete preJsonObj[exceptList[i]];
delete nextJsonObj[exceptList[i]];
}
return _.isEqual(JSON.stringify(preJsonObj), JSON.stringify(nextJsonObj));
}
这个只是粗略的监听 并没有实质性监听某个值真的是否发生变化
比如从 1 => 0 又从 0 =>1 本质上是没有变化 但是我们依旧判断为变化了