MobX - 배열에서 단일 항목을 선택하고 다른 항목은 모두 선택 취소 하시겠습니까?

Question

다음과 같은 관찰 가능한 검색 엔진 배열이 있습니다.

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

사용자는 단지 UI에서 한 번에 하나를 선택 할 수 있어야한다.

@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에 의해 주어진 솔루션은 잘 작동하지만, 당신은 또한)는 transaction 인 action를 (사용하고 있기 때문에, 이전에 선택한 항목을 선택 취소하고 원하는 경우 새 항목을 선택할 수 있습니다.

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

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

Answer 2

내가 하나의 관찰 나타내는 선택을 소개하고 선택된 상태를 유도 할 것이다 : 그들은 예를 들어 yahoo을 선택한다면, 야후는 selected: true을 얻을 것입니다 및 기타 공급자가 selected: false

이 작업을 얻을 것입니다 클릭을 처리 그에서 : 당신은 지금 선택에 몇 번 다른 엔진을 지정하면

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

, 당신은 엔진의 selected 상태에 따라 업데이트됩니다 것을 볼 수 있습니다 ly

(N.B.) this 문제를 방지하기 위해이 같은 일반 객체 + 파생를 선언 할 경우 화살표 기능을 사용하지 않는