Mobx - 如何跟踪动态表单输入的深层变化？

我需要它的形式。我的形式是这样的数据提交：Mobx - 如何跟踪动态表单输入的深层变化？

const initial = { 
    name "", 
    surname: "", 
    adresses: new Array() <- this give me warning when array empty * 
}

我不会忽略在其中我有一些标准的属性，我可以添加新的特性，使用extendObservable 不会忽略类型{状态的对象的数组：“” ，镇：“”}

extendObservable(this.props.data['adresses'][i], { [keyName]: '' });

我的问题是，这样做extendObservable增加新的属性不会忽略我没有看到（观察）在现场的任何变化，但如果这样做extendObservable后，我更新状态的值我可以看到新增加的属性。为什么我在添加到地址的时候没有看到新的地产？

我的商店是这个（打字稿）：

const initial = { 
    namel: "", 
    surname: "", 
    addresses: new Array() 
} 

export class formStore { 
    constructor() { 
     this.formData = initial 
    } 
    @observable formData: { 
     [index: string]: any, 
     name: string, 
     surname: string, 
     addresses: any[] 
    }; 
    @action updatePropertyForm(key: string, value: any) { 
     this.formData[key] = value; 
    } 

    @action updatePropertyAddresses(key: string, value: string, i: number) { 
     this.formData.addresses[i][key] = value; 
    } 

    @action initializeFormData(data: any) { 
     this.formData = data; 
    } 

    @action addEmptyAddress() { 
     const emptyAddress = { 
      state: "", 
      townl: "", 
     } 
     this.formData['addresses'].push(emptyAddress); 
    } 

    @action addPropertyToAddresses(_keyName: string) { 
     const length = this.formData['addresses'].length; 
     for (var i = 0; i < length; i++) { 
      let keyName = _keyName 
      keyName = keyName.replace(/\s/g, '') 
      keyName = toLowerChar(keyName); 
      extendObservable(this.formData['addresses'][i], { [keyName]: '' }); 
     } 
    }  

    @action removePropetyFromAddresses(_keyName: string) { 
     const length = this.formData['addresses'].length; 
      for (var i = 0; i < length; i++) { 
       let keyName = _keyName 
       delete this.formData['addresses'][i][keyName]; 
      } 
    } 
}

通过调用添加或删除我必须更新其他属性之一，所以我可以看到新的属性我补充道。我如何观察它，当我把新的财产？

来源

2017-04-20 Efthimis Pozov

对不起，我不明白这个问题。你是否介意重新形成'我的问题是，这个工作我必须通过改变价值触发一次地产中的一个财产，然后输入新的出现这是可观察的。当我给地址添加新的属性时，如何让它立即显示？'请用更短的短语？ – dagatsoin

我试图重新表达它，我希望你能理解。 –

'我更新状态的值'你在哪里做的？请注意，使用extendObservable添加的属性将不会触发任何观察者，因为实际上只会观察观察者初始化中存在的属性。它有帮助吗？ – dagatsoin

正如您在can only observe objects properties which exist during observer init的文档中所述。

如果你想观察动态密钥的对象（如您的地址对象），您必须使用asMap修饰符（或我在做为例直接在mobx.map）

像这样：

// add a first addresse 
store.addresses.push(mobx.observable.map({town: "Stormwind", street: "Dwarf lane"})); 

// add a props to the first addresse 
store.addresses[0].set("number", 2);

这是一个工作示例。

https://jsbin.com/lasudor/2/edit?js,console

来源

2017-04-21 15:33:34 dagatsoin

是的，这是这样工作的。我会将其标记为答案。但是现在我开始使用typescript，并通过使用我定义的类的数组来找到解决方案。例如通过这样做： class AddressDefinition { constructor（id：string，title：string，value：any）{ this.id = id; this.title = title; this.value = value; }; \ @observable title：string \ @observable value：any } 通过这样做，我得到了可观察的“对象”。我新打字稿这就是为什么很难找到这个。 –

Mobx - 如何跟踪动态表单输入的深层变化？

回答

相关问题