1

我希望能够攻TouchableOpacity按钮后,导航到一个新的屏幕,但我接受它说touchableopacity onpress功能(是不是一个函数)反应原住民

_this3.handleThisTap是不是一个错误功能。 (在 '_this3.handleThisTap()', '_ this3.handleThisTap' 是未定义)

import React, { Component } from 'react'; 

import { 
    Text, 
    StyleSheet, 
    View, 
    TextInput, 
    KeyboardAvoidingView, 
    FlatList, 
    TouchableOpacity, 
    TouchableHighlight, 
} from 'react-native'; 

import { 
    SearchBar, 
    Wrapper, 
    ItemWrapper, 
} from './searchView.styles'; 

export default class SearchView extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     feedUrl: 'https://api.urbandictionary.com/v0/autocomplete?term=', 
     isLoading: true, 
    } 
    } 

    handleTextChange(text) { 
    let url = this.state.feedUrl + text; 
    return fetch(url) 
     .then((response) => response.json()) 
     .then((res) => { 
     this.setState({ 
      data: res, 
      isLoading: false, 
     }) 
     }) 
     .catch((error) => { 
     console.log(error); 
     }) 
    } 

    handleThisTap(item) { 
    this.props.navigation.navigate('FeedView', item); 
    } 

    _renderItem({ item }) { 
    return (
     <ItemWrapper 
     underlayColor='white' 
     onPress={() => this.handleThisTap(item)}> 
     <Text>{item}</Text> 
     </ItemWrapper> 
    ) 
    } 

    render() { 

    return (
     <Wrapper behavior="padding"> 
     <SearchBar 
      style={{ 
      shadowOffset: { 
       width: 0, 
       height: 5, 
      }, 
      }} 
      autoFocus={true} 
      clearTextOnFocus={true} 
      placeholder="Search for text here" 
      returnKeyType='search' 
      clearButtonMode='always' 
      keyboardShouldPersistTaps={true} 
      onChangeText={(text) => 
      this.handleTextChange(text) 
      } /> 
     <FlatList 
      data={this.state.data} 
      renderItem={this._renderItem} 
     /> 
     </Wrapper> 
    ) 
    } 
} 

我已经使用bind.(this)

任何帮助理解试过。

+0

什么是你试过的'bind。(this)'?这没有任何意义。 @Meysam Izadmehr提到它是正确的。如果你仍然没有得到正确的答案,那么你的结果是有一个语法错误。 –

+0

这是我的不好。我应该详细解释我所尝试的。 @Meysam Izadmehr的答案工作。 – iprateekk

回答

4

错误来自您没有将_renderItem绑定到this。将它绑定在constructor

constructor(props) { 
    super(props); 
    this.state = { 
    feedUrl: 'https://api.urbandictionary.com/v0/autocomplete?term=', 
    isLoading: true, 
    } 
    this._renderItem = this._renderItem.bind(this); //add this line 
} 
+0

仍然是一样的错误:( – iprateekk

+0

我已经更新了答案,也进行了测试,它现在正在工作中 –

+0

这工作,非常感谢,我对此很新,所以请记住,我需要绑定函数构造函数 – iprateekk

相关问题