Question

trigger = () => {
  console.log('testing');
}

render() {
  return (    
    <FlatList
      data={this.state.videos}
      renderItem={({ item }) => (
        <TouchableWithoutFeedback onLongPress={this.trigger}>
          <Text>{item.title}</Text>
        </TouchableWithoutFeedback>
      )}
      keyExtractor={(item) => item.id.videoId.toString()}
    />
  )
}

上面的代码工作正常，有一个正在呈现的项目列表，onLongPress将执行该函数并执行console.log，但是，它无法知道哪个项目被长按。

现在，为了知道哪个项目是longPress，我尝试设置trigger接受一个参数并在函数调用中传递item。

<TouchableWithoutFeedback onLongPress={this.trigger(item)}>
  <Text>{item.title}</Text>
</TouchableWithoutFeedback>

trigger = item => {
  console.log('testing', item);
}

我注意到，一旦加载了列表，就会自动为每个项目触发函数trigger。并且onLongPress根本没有回应。我认为它与绑定有关。我也试过以下方式，但失败了

onLongPress={this.trigger.bind(item)}
onLongPress={this.trigger.bind(this)}
onLongPress={() => this.trigger.bind(this)}
onLongPress={item => this.trigger.bind(item)}

以上两种方式均无效。任何提示？

Answer 1

根据您在渲染时调用该函数的共享代码，调用trigger事件中的onLongPress函数。

试试这个

<TouchableWithoutFeedback onLongPress={() => this.trigger(item)}>
      <Text>{item.title}</Text>
</TouchableWithoutFeedback>

希望这会有所帮助！

Answer 2

试试这个

onLongPress={item => this.toggleModal.bind(this, item)}

甚至可以这样做

//In the constructor, setup the binding
constructor(props) {
   super(props)
   this.toggleModal= this.toggleModal.bind(this)
}

//To call this function
onLongPress=item => this.toggleModal(item)

或这种ES6方式也有效，简单和简短

onLongPress={item => this.toggleModal(item)}

如何使用TouchableWithoutFeedback将项目作为参数传递

2 个答案: