javascript - touchableopacity onpress function undefined (is not a function) React Native - Stack Overflow

admin管理员组

文章数量:1336732

I want to be able to navigate to a new screen after tapping the TouchableOpacity button but I receive an error which says

_this3.handleThisTap is not a function. (In '_this3.handleThisTap()','_this3.handleThisTap' is undefined)

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: '=',
      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>
    )
  }
}

I have tried using bind.(this)

Any help is appreciated.

I want to be able to navigate to a new screen after tapping the TouchableOpacity button but I receive an error which says

_this3.handleThisTap is not a function. (In '_this3.handleThisTap()','_this3.handleThisTap' is undefined)

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./v0/autoplete?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>
    )
  }
}

I have tried using bind.(this)

Any help is appreciated.

• javascript
• react-native
• react-navigation
• undefined-function
• touchableopacity

Share Improve this question Follow edited Jul 2, 2017 at 19:59 iprateekk asked Jul 2, 2017 at 19:28 iprateekkiprateekk 61622 gold badges99 silver badges1515 bronze badges 2

• what is 'bind.(this)' that you tried? This does not have any meaning. @Meysam Izadmehr mentioned it right. If you still don't get the right answer then it there is a syntax error on your end. – Minkesh Jain Commented Jul 3, 2017 at 7:22
• Thats my bad. I should have explained what I tried in detail. @Meysam Izadmehr's answer worked. – iprateekk Commented Jul 3, 2017 at 18:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

The error arises from that you didn't bind _renderItem to this. Bind it in constructor:

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

本文标签： javascripttouchableopacity onpress function undefined (is not a function) React NativeStack Overflow