如何在项目数组中选择一个按钮并取消选择前一个值答案

【问题标题】：How to select a button in array of items and unselect the previous value如何在项目数组中选择一个按钮并取消选择前一个值
【发布时间】：2019-02-26 03:44:10
【问题描述】：

我正在从 Firestore 中获取一组数据。此项目数组中只有一个项目可以具有值“默认”== true。其余项目将是错误的。我想让用户选择选择其中一个按钮，然后从值为 true 的按钮中删除默认值。我知道我可以创建一个函数来使用侦听器函数更改 Firestore 中的值。我宁愿在本地处理这个，所以我在firestore中为自己保存了一个读/写。

我需要映射数组并更改状态吗？任何帮助是极大的赞赏。

我的 renderItem 功能是

 if (item.type == 'car'){
                        return (
                          <TouchableHighlight onPress={() => this.selectItem(item)} underlayColor={'transparent'}>
                            <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>

                                        <Text style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                        {checkMark}
                                        </Text>
                      <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                    <Text style={{alignSelf:'center'}}>
                                    {car} 
                                    </Text>
                                </View>
                                <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                  {item.make} {item.model} {item.year}
                                </Text>
                                <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                 {item.licensePlate} 
                                </Text>
                            </LinearGradient>
                          </TouchableHighlight>
                          )
                      }
                      if (item.type == 'bicycle') {
                        return (
                            <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#99cc00', '#000099']}>
                                  <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                        <Text style={{alignSelf: 'center'}}>
                                        {bicycle} 
                                        </Text>
                                    </View>
                                    <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                      {item.make} {item.model} {item.year}
                                    </Text>
                                    <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                     {item.licensePlate} 
                                    </Text>
                            </LinearGradient>

                          )
                        }

我想要做的是仅在用户单击按钮时应用复选标记图标。然后它会自动取消选择另一个按钮。我试图过滤掉数组并从那里更改值，但我很难过滤特定索引而不是更改所有值。

【问题讨论】：

嘿，请展示您迄今为止所做的尝试，以便更准确地描述您的用例。你的问题很不清楚。另一方面使用 Array.prototype.filter.
您好，欢迎@Kieran 访问该站点。正如目前所写的那样，由于缺乏明确性，我们无法确定您问题的最佳答案。请更新您对特定问题的回答，并添加您迄今为止尝试过的任何内容。
我已经更新了代码。对此感到抱歉

标签： javascript arrays react-native google-cloud-firestore

【解决方案1】：

只需过滤您的数组。

var someArrayFromFirebase = [{"default": false}, {"default": true},{"default": false},{"default": false}];

var removeDefaultTrue = function() {
  someArrayFromFirebase = someArrayFromFirebase.filter(v => !v.default);
  render();
}

var render = function() {
  document.getElementById("content").innerHTML = JSON.stringify(someArrayFromFirebase);
}

render();

<button onclick="removeDefaultTrue()" >Remove or whatever</button>

<div id="content"></div>

渲染功能仅用于可视化。另一个函数进行过滤。希望对您有所帮助。

【讨论】：

【解决方案2】：

我能够通过执行以下操作使其工作。

  var currentDefault = this.state.vehicleList.find(function(element, index) {
  return element.default == true;
  });
  var currentVehicle = this.state.vehicleList.indexOf(currentDefault);
  var selectedItem = this.state.vehicleList.indexOf(val);

   if (currentVehicle == selectedItem){
    console.log('same vehicle');
   } else {
    this.state.vehicleList[currentVehicle].default = false;
    this.state.vehicleList[selectedItem].default = true;
   }

【讨论】：