Question

我正在一个项目中，我需要从其中一个项目设置为默认值的数组中提供项目列表。如果用户单击其他项目，则复选标记将从默认项目移动到所选项目。

例如，如果我有数组[default: "Saab", "Volvo", "BMW"]。然后，如果我单击Volvo，它将具有默认属性。我已经过滤掉数组并将其更新为新选择的项目。在渲染它们后，在视图组件上显示它时出现了问题。我的过滤器功能是

selectItem(val){
  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){
    this.state.vehicleList[currentVehicle].default = false;
    this.state.vehicleList[selectedItem].default = true;
    this.state.pickedVehicle = this.state.vehicleList[selectedItem];
  } else {
    console.log('same vehicle');
  }   
}

我想将项目置于状态以使其更改吗？

我在下面添加了渲染功能。

_renderItem({item, key}) {

      const car = (<Icon name="car" size={16} color="grey" />)
      const bicycle = (<Icon name="bicycle" size={16} color="grey" />)
     color="black" />)
      const check = (<Icon name="check-square" size={30} color="green" />)



                        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']}>
                                    {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </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']}>
                                      {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}
                                        <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>

                              )
                            }

我如何添加组件

{this.state.vehicleList[index].default  && (
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}

Answer 1

由于对何时在项目旁边显示复选图标有一定的限制，因此可以在渲染时将该条件与图标一起添加。例如，您需要根据该条件显示Icon组件，您应该这样添加它。

{this.state.vehicleList[indexOfTheItem].default && (<Icon/>)}

仅当this.state.vehicleList [item] .default为true时，图标才会呈现

当状态更改时，组件将再次呈现。在更新每辆车默认状态时，可以使用相应车的布尔值作为其旁边的条件。

根据数组视图中的选定项目渲染组件

1 个答案: