我正在使用 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>)}}/>
这是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]})
}
}
在平面列表渲染中
<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>
您可以尝试数组而不是存储单个选定的项目，
在声明时将选定状态设置为空数组。
...
<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})
}
}
问题可能出在函数参数赋值上。如果您在Flatlist中看到两种renderItem方法，则使用renderItem={({item, index})以便最后一个renderItem可以访问上述item, index。调用onPress时，在回调中放入哪个项目或索引时存在混淆。请尝试添加不同的名称。喜欢
<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>)}}/>
让我知道这是否可以解决您的问题。快乐编码。:)
如果我
纠正理解，您只需为每个属性(颜色和大小(选择一个选项。因此，您需要在状态中为要保存的每个元素设置一个字段。
您的_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>
我试图在这个零食中重现你的问题，你可以看看。