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