如何根据键在flatlist中选择多个值

Question

我正在使用react native的强大的flatlist这是我的数组，如下所示：

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>)}}/>

这是im匹配项目索引的函数..

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

这是我试过的： - >

我调用手动点击功能将其值与索引+标签名称相匹配，它会自行更改，但是当我点击蓝色时它会改变颜色但是当我点击它时它会改变自己但是蓝色会得到它以前的状态

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

我想只选择一个基于那个数组的项目就是'颜色'我希望当我点击蓝色时它可以改变它的颜色。 如果我也点击SMALL它也可以改变颜色本身需要存储两个值。

我希望你能轻松理解。 提前致谢

更新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中的两个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,
  }));
};

每次单击元素时，您需要知道它是颜色还是大小，然后正确更新右侧字段。 也许这不是最高效的方式，但它确实有效。

然后，在您的渲染方法中，为了分配样式，您可以检查两个条件：

<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>

我尝试在这个小吃中重现你的问题，你可以看看。