首页 文章

将item.key从FlatList传递给反应原生的Text组件

提问于
浏览 次
0

我想要一个包含组件的FlatList，在单击时调用一个名为“scrollPressed”的函数 . 我已经设法使这项工作，但我无法设置将项目的密钥传递给该功能 . 我的目标是使scrollPressed函数的行为不同，具体取决于按下的项目 . 这是我现在的代码：

export default class Scroll extends Component {
    constructor(props){
        super(props)
        this.state = {page: 1, thing: "unset"}
        this.scrollPressed = this.scrollPressed.bind(this)
    }

    scrollPressed(input){
        // do stuff
    }

    render(){
            return(
                <View style={{padding: 30}}>
                    <FlatList
                        data={[{key: 'a'},
                        {key: 'b'}
                        ]}
                      renderItem={({item}) => <Text onPress={({item}) => this.scrollPressed(item.key)}>{item.key}</Text>}
                    />
                </View>
            )
    }
}

我得到的错误是 undefined is not an object (evaluating 'item.key')

从这个我相信该项是未定义的但是我能够在行的那个时候使用item.key如此： ...{item.key}</Text>} 所以我很困惑为什么它在一个案例中是未定义的而不是另一个案例 .

我想知道为什么它在一种情况下是不确定的而不是另一种情况，我也想知道如何解决这个问题 . 谢谢

react-native

2 回答

  • 0

    Solution

    renderItem={({item}) => <Text onPress={() => this.scrollPressed(item.key)}>{item.key}</Text>}

    Explanation: 错误，因为它试图评估 item.key 您传递给此处的参数 this.scrollPressed 但没有 {item} .

    我不知道你的想法 onPress={({item}) ，基本上onPress回调没有持有任何名为 item 的对象，你试图将此 item 传递给 scrollPressed 所以有错误（因为没有这样的 item ） .

    Reference: Text onPress docs

    回复于
  • 2

    我对您的代码进行了一些更改，这对您有所帮助 . 请尝试以下代码：

    export default class Scroll extends Component {
  constructor(props){
    super(props)
    this.state = {page: 1, thing: "unset"}
  }

  scrollPressed(input){
    // do stuff
  }

  render(){
    return(
        <View style={{padding: 30}}>
            <FlatList
                data={[{key: 'a'},{key: 'b'}]}
                renderItem={({item}) =>this.renderTextItem(item) }
                keyExtractor={(item, index) => index.toString()}
            />
        </View>
    )
  }

  renderTextItem(item){
    return(
        <Text
          onPress={() => this.scrollPressed(item.key)}>
          {item.key}
        </Text>
    )
  }
}
    回复于

相关问题