Question

我有以下可观察的搜索引擎数组。

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

用户应该只能从UI中一次选择一个。因此，如果他们选择yahoo，例如，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，并从中导出所选状态：

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

如果您现在将几个引擎分配给选择，您将看到引擎的selected状态将相应更新

（N.B。如果声明一个普通的对象+这样的派生，不要使用箭头函数，以避免this的问题）

MobX - 选择数组中的单个项目，取消选择所有其他项目？

2 个答案: