代码之家  ›  专栏  ›  技术社区  ›  Tord Larsen smaznet

反应本机按钮错误问题,无法单击侦听器

  •  1
  • Tord Larsen smaznet  · 技术社区  · 6 年前

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

    onPress={this.\u onSearchPress}

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

    onPress 正确地

    enter image description here

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

    enter image description here

    1 回复  |  直到 6 年前
        1
  •  2
  •   Alwaysblue    6 年前

    好吧,我想我可能发现了错误。

     _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);
          };
    

    请注意结尾 } 你的第一个功能是什么