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 - 如何跟蹤動態表單輸入的深層變化？

回答

相關問題