Question

我想拥有一个FlatList，其中的组件在单击时会调用一个名为“ scrollPressed”的函数。我设法完成了这项工作，但是我无法将项目的键传递给函数。我的目标是使scrollPressed函数的行为取决于所按下的项目。这是我现在拥有的代码：

render() {
    return this.html`
    <div class="parts-view-inner" onmouseup="${this.endDragging}">
        <div class="" id="sidebar-content-container" data-width=${this.state.sidebarWidth}>
            ${CurrentBuildViewComponent}
            <div id="dragbarH" onmousedown="${this.handleHDrag}"></div>
            ${QuickSummaryViewComponent}
        </div>
        <div id="dragbarV" onmousedown="${this.handleVDrag}"></div>
        ${PartsExplorerViewComponent}
    </div>
    `;
}

我得到的错误是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> ) } }

据此，我相信item是未定义的，但是我可以在如下行的行中使用item.key：undefined is not an object (evaluating 'item.key')，因此我困惑为什么在一种情况下未定义它

我想知道为什么在一种情况下而不是在另一种情况下未定义，我也想知道如何解决此问题。谢谢

Answer 1

解决方案

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

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

我不知道您在onPress={({item})背后的想法，基本上onPress回叫不保存任何名为item的对象，并且您尝试将此item传递给scrollPressed是错误的（因为没有这样的item）。

参考： Text onPress docs

Answer 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>
    )
  }
}

从FlatList将item.key传递给React Native中的Text组件

2 个答案: