开发者问题收集

React Native 按钮错误问题,无法有点击监听器

2018-11-13
119

按下按钮时什么也没有发生。图片显示了一个警告,如果我将

onPress={this._onSearchPressed}

更改为

onPress={() => this._onSearchPressed()}

,我就可以摆脱它。但是现在按下按钮时,我得到了下图中看到的错误,如“未定义不是函数...”。 如何正确调用 onPress

在此处输入图片说明

    'use strict';

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  TextInput,
  View,
  Button,
  ActivityIndicator,
  Image,
} from 'react-native';


type Props = {};

function urlForQueryAndPage(key, value, pageNumber) {
  const data = {
      country: 'uk',
      pretty: '1',
      encoding: 'json',
      listing_type: 'buy',
      action: 'search_listings',
      page: pageNumber,
  };
  data[key] = value;

  const querystring = Object.keys(data)
    .map(key => key + '=' + encodeURIComponent(data[key]))
    .join('&');

  return 'https://api.nestoria.co.uk/api?' + querystring;
}


export default class SearchPage extends Component<Props> {
  static navigationOptions = {
    title: 'Property Finder',
  };

  constructor(props) {
    super(props);
    this.state = {
       searchString: 'london',
       isLoading: false,
    };

  }
  _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');
  this.setState({ searchString: event.nativeEvent.text });
  console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);

  _executeQuery = (query) => {
    console.log(query);
    this.setState({ isLoading: true });
  };

  _onSearchPressed = () => {
    const query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  };

};

  render() {
   console.log('SearchPage.render');
    const spinner = this.state.isLoading ? <ActivityIndicator size='large'/> : null;
    return (
      <View style={styles.container}>
        <Text style={styles.description}>
          Search for houses to buy!
        </Text>
        <Text style={styles.description}>
          Search by place-name or postcode.
        </Text>
        <View style={styles.flowRight}>
        <TextInput
            underlineColorAndroid={'transparent'}
            style={styles.searchInput}
            value={this.state.searchString}
            onChange={this._onSearchTextChanged}
            placeholder='Search via name or postcode'/>
            <Button
                onPress={this._onSearchPressed}
                color='#48BBEC'
                title='Go'>
            </Button>
        </View>
        <Image source={require('./Resources/house.png')} style={styles.image}/>
        {spinner}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#a56565'
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch',
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flexGrow: 1,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC',
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  image: {
  width: 217,
  height: 138,
},

});

在此处输入图片说明

1个回答

好的,我想我可能已经找到了错误。

在您的代码中

 _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');
  this.setState({ searchString: event.nativeEvent.text });
  console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);

  _executeQuery = (query) => {
    console.log(query);
    this.setState({ isLoading: true });
  };

  _onSearchPressed = () => {
    const query = urlForQueryAndPage('place_name', this.state.searchString, 1);
    this._executeQuery(query);
  };

};

您正在嵌套这两个函数

  _executeQuery = (query) => {
        console.log(query);
        this.setState({ isLoading: true });
      };

      _onSearchPressed = () => {
        const query = urlForQueryAndPage('place_name', this.state.searchString, 1);
        this._executeQuery(query);
      };

在您的 _onSearchTextChanged 函数中。您可能想要执行类似这样的操作

  _onSearchTextChanged = (event) => {console.log('_onSearchTextChanged');
      this.setState({ searchString: event.nativeEvent.text });
      console.log('Current: '+this.state.searchString+', Next: '+event.nativeEvent.text);
}
 _executeQuery = (query) => {
        console.log(query);
        this.setState({ isLoading: true });
      };

      _onSearchPressed = () => {
        const query = urlForQueryAndPage('place_name', this.state.searchString, 1);
        this._executeQuery(query);
      };

请注意第一个函数的结束 >

Alwaysblue
2018-11-13