MobX - 選擇數組中的單個項目，取消選擇所有其他項目？

Question

我有以下可觀察的搜索引擎數組。

@observable favoriteSearchEngine = [ 
    { 'provider' : 'google', 'selected': true }, 
    { 'provider' : 'yahoo', 'selected': false }, 
    { 'provider' : 'bing', 'selected': false }, 
]; 

用戶應該只能夠選擇在一個從UI時間。所以，如果他們選擇yahoo例如，雅虎將獲得selected: true和任何其他供應商將獲得selected: false

這個動作處理點擊：

@action onClickFavoriteSearchEngine = (provider) => { 
    alert(provider); // yahoo shows here 
    // How to do this step, only selected provider true and falsify all others in the array? 
} 

Answer 1

通過@mweststrate給出的解決方案的偉大工程，但由於您使用的是action（這也是一個transaction）你可以取消選擇先前選擇的，並選擇新的，如果你願意的話：

@action onClickFavoriteSearchEngine = (provider) => { 
    alert(provider); // yahoo shows here 

    favoriteSearchEngine.forEach(e => e.selected = false); 
    favoriteSearchEngine.find(e => e.provider === provider).selected = true; 
} 

Answer 2

我會介紹一個可觀察的代表選擇，並從中選擇狀態來自：

@observable selection = null 
@observable favoriteSearchEngine = [ 
    { 'provider' : 'google', 'selected': function() { 
     return selection === this 
    } 
] 

如果你現在幾次指定另一個引擎的選擇，你會看到發動機的selected國家將根據更新ly

（N.B.如果宣佈一個普通的對象+推導這樣不使用箭頭功能，以避免問題與this）