Question

我使用的是react native的强大列表，这是我的数组，如下所示：

data =   [
      {Color:[{'label':'BLUE','value':'10'}, {'label':'RED','value':'11'}]},
      {Size:[{'label':'SMALL','value':'13'},{'label':'BIG','value':'12'}]}
      ]

这是我的单位列表

<FlatList data={data}
              numColumns={1}
              keyExtractor={(item, index) => index.toString()}
              extraData={this.state}
              ItemSeparatorComponent={FlatListItemSeparator}
              renderItem={({item, index}) => {
                return(
                <View >
                <Text >{Object.keys(item)}</Text>
                <FlatList data={item[Object.keys(item)]}
                numColumns={5}
                keyExtractor={(index) => "D"+index.toString()}
                extraData={this.state}
                renderItem={({item, index}) => {
                  return(
                        <TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
                            styles.Buttoncolor, this.state.selected == index+item.label
                              ? styles.onfocusbutton
                              : null
                          ]}>
                          <Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
                        </TouchableOpacity>
                        )
                }
                }/>
              </View>)}}/>

这是与项目索引即时匹配的函数。

  _handleclick = (index, item) => {
        this.setState({selected: index+item.label, selectedColor: item.value})
      }

这是我尝试过的：->

我调用单击函数将其值与索引+标签名称匹配，并且它本身会发生变化，但是当我点击蓝色时，它会改变颜色，但是当我点击小时它可以改变但蓝色会恢复原来的状态

现在这是我主要要做的事情：->

我只想基于“颜色”数组选择一项我希望当我单击“蓝色”时可以将其更改为颜色。如果我也单击“小”，它本身也可以更改颜色，即需要存储两个值。

希望您能轻松理解。预先感谢

更新1

状态：已解决

更改

_handleclick = (index, item,objectname) => {
         const {selected,result} = this.state
         let selectedIndex = this.state.selected.indexOf(item.value);
            if(selectedIndex == -1){
           let my =   this.state.result.filter((e)=>{return e[objectname]})
             selected.forEach((items) => {
                    let arrayofattribute =   result.filter((e)=>{return e[objectname]})
                    arrayofattribute.forEach((value,index)=>{
                    newval =  value[objectname].map((val,i)=>{
                        if(items == val.label)
                        {
                          selected.splice(selected.indexOf(val.label),1)
                        }
                      })
                    })
             })
            this.setState({selected:[item.label,...this.state.selected]})
          }
      }

在Flatlist呈现中

<TouchableOpacity
                        onPress={() => this._handleCategoryColor(index, item,objectname)}

                        style={[
                          styles.Buttoncolor,

                          this.state.selected.indexOf(item.label) != -1
                            ? styles.onfocusbutton
                            : null,
                        ]}>
                        <Text
                          style={[
                            styles.textcolor,
                            this.state.selected.indexOf(item.label) != -1
                              ? styles.white
                              : null,
                          ]}>
                          {item.label}

                        </Text>
                      </TouchableOpacity>

Answer 1

您可以尝试使用数组代替存储单个选定项，

在声明时将选定状态设为空数组。

...
<TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
                            styles.Buttoncolor, this.state.selected.indexOf(index+item.label) != -1
                              ? styles.onfocusbutton
                              : null
]}>
    <Text style={[styles.textcolor, this.state.selected.indexOf(index+item.label) != -1?styles.white:null]}>{item.label}</Text>
</TouchableOpacity>

这是处理方法，将新选择的项目推入选定的数组

_handleclick = (index, item) => {
        let selectedIndex = this.state.selected.indexOf(index+item.label);
        if(selectedIndex== -1){
          this.setState({selected: [...this.state.selected,index+item.label], selectedColor: item.value})
        }

      }

Answer 2

问题可能出在函数参数分配上。如果您在renderItem中看到两个Flatlist方法都使用renderItem={({item, index})，那么最后一个renderItem可以访问上面的item, index。调用onPress时会产生混乱，要在回调中放入哪个项目或索引。请尝试添加arg不同的名称。喜欢

<FlatList data={data}
   numColumns={1}
   keyExtractor={(item, index) => index.toString()}
   extraData={this.state}
   ItemSeparatorComponent={FlatListItemSeparator}
   renderItem={({item, index}) => {
   return(
     <View >
     <Text >{Object.keys(item)}</Text>
     <FlatList data={item[Object.keys(item)]}
                numColumns={5}
                keyExtractor={(index) => "D"+index.toString()}
                extraData={this.state}
                renderItem={({set, key}) => {
                  return(
                        <TouchableOpacity onPress={() => this._handleclick(key, set)} style={[
                            styles.Buttoncolor, this.state.selected == index+item.label
                              ? styles.onfocusbutton
                              : null
                          ]}>
                          <Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
                        </TouchableOpacity>
                        )
                }
                }/>
              </View>)}}/>

让我知道这是否可以解决您的问题。快乐的编码。：）

Answer 3

如果我正确理解，则只需为每个属性（颜色和大小）选择一个选项。因此，您需要为每个要保存的元素在状态中添加一个字段。

您的_handleClick函数可能是这样的：

_handleclick = (index, item) => {
  const { Color } = this.state.data[0];
  const { Size } = this.state.data[1];
  this.setState(state => ({
    selectedColor: Color.find(color => color.label === item.label)
      ? index + item.label
      : state.selectedColor,
    selectedSize: Size.find(size => size.label === item.label)
      ? index + item.label
      : state.selectedSize,
  }));
};

每次单击一个元素时，都需要知道它是颜色还是尺寸，然后正确更新正确的字段。也许这不是最有效的方法，但是它可以起作用。

然后，在您的render方法中，要分配样式，您可以检查以下两个条件：

<TouchableOpacity
  onPress={() => this._handleclick(index, item)}
  style={[
    styles.Buttoncolor,
    this.state.selectedSize == index + item.label ||
    this.state.selectedColor == index + item.label
      ? styles.onfocusbutton
      : null,
  ]}>
  <Text
    style={[
      styles.textcolor,
      this.state.selectedSize == index + item.label ||
      this.state.selectedColor == index + item.label
        ? styles.white
        : null,
    ]}>
    {item.label}
  </Text>
</TouchableOpacity>

我尝试在this snack中重现您的问题，您可以看一下。

如何根据那里的键在平面列表中选择多个值

3 个答案: