首页 > 解决方案 > 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,
      }));
    }
  };

标签: javascriptreact-native

解决方案


你只需要改变这个

 onPress={this._nextStep(item.category)}

 onPress={()=> this._nextStep(item.category)}

推荐阅读