antd form changedValues判断某个属性是否有修改

前言

我们项目里ui框架用的比较多的是antd和antd proComponents，对于Form表单有暴露这么一个函数是onValuesChange，代码如下：

onValuesChange={(changedValues: any, values: any) => {
    console.log('%c changedValues ⧭', 'color: #ffa280', changedValues);
    console.log('%c values = ⧭', 'color: #997326', values);
}}

问题

比如一个Form fields是如下的数据结构：

const initialForm = {
    name: 'Bob',
    age: 11,
    sex: 'male',
}

如果表单里修改了name为'Tom'，此时会触发onValuesChange函数执行，changedValues打印出来是如下的一个对象：

const changedValues = {
    name: 'Tom',
}

某些需求是要知道旧值和新值，有些需求只需要知道哪些值是改变的，所以怎么判断是否有属性改变，需要一个方法去判断，antd在这层做了一些处理，changedValues只会返回包含修改属性的一个过滤的对象。

判断方法

之前有尝试用过这样的方法去判断

if (changedValues?.name) {
    // ...
}

但是这样并不能解决，值修改为undefined这样的场景，所以还是需要用属性是否存在来去判断，这样才是正确的。

有两种方式，如下：

// 1. Object.prototype.hasOwnProperty()
if (changedValues.hasOwnProperty('name')) {
    // ...
}

// 2. key in object
if ('name' in changedValues) {
    // ...
}

// 3. Reflect.has()
if (Reflect.has(changedValues, 'name')) {
    // ...
}