javascript - Flatlist TouchableHighlight 传递值
问题描述
我想实现一个能够列出一些类别的页面,一旦点击,就可以执行一些其他任务。我尝试像在这里一样实现它,但是当我呈现页面时,会自动选择类别并将其设置为最后一个值。我错了什么?这是我的代码
const data = [
{category: 'a'},
{category: 'b'},
{category: 'c'},
];
<FlatList
data={data}
renderItem={({item}) => (
<View style={categoryStyles.itemContainer}>
<TouchableHighlight style={{ }} selectedCategory={item.category}
onPress={this._nextStep(item.category)}>
<View style={{alignItems:'center', justifyContent: 'space-around',}}>
<Icon name={item.icon} size={40}/>
<Text style={categoryStyles.item}>{item.description}</Text>
</View>
</TouchableHighlight>
</View>
)}
keyExtractor={item => item.id}
numColumns={numColumns} />
_nextStep = (selectedCategory) => {
if (this.state.index !== this.props.children.length - 1) {
this.setState(prevState => ({
index: prevState.index + 1,
}));
this.setState(() => ({
selectedCategory: selectedCategory,
}));
}
};
解决方案
你只需要改变这个
onPress={this._nextStep(item.category)}
至
onPress={()=> this._nextStep(item.category)}
推荐阅读
- c# - 通过电子邮件发送创建并保存在变量 DataSet() 中的数据;作为 csv 中的附件或 C# 中的 excel 扩展名
- javascript - 加载动画后如何加载表单
- python - 有没有办法在 python 的函数中将文本插入到数据框名称中?
- javascript - 如果项目的属性包含文本,如何过滤项目数组
- javascript - 如何在模式中重用现有的 HTML 元素?
- sql - SQL将2行加入1行有条件
- vue.js - 如果从下拉列表中选择图像,vuejs 隐藏 img src
- colors - 在地图上显示相互重叠的多条路线的最清晰方法是什么?
- javascript - bootstrap-vue b-table:在表重新加载时保持扩展行扩展
- dayjs - 月末使用dayjs、set和toISOstring构造月初日期