Button onPress不起作用,根本没有调用onButtonPress()方法。我不确定自己在做什么错。
我有未打印的console.log语句。 顺便说一下,下面的代码来自Stephen Grider的本机udemy cource
下面是loginForm.js的代码
任何帮助将不胜感激。
import React, { Component } from 'react';
import { Text } from 'react-native';
import firebase from 'firebase';
import { Button, Card, CardSection, Input, Spinner, Field } from './common';
class LoginForm extends Component {
state = { email: '', password: '', error: '', loading: false };
onButtonPress() {
const { email, password } = this.state;
console.log('da');
this.setState({ error: '', loading: true });
firebase
.auth()
.signInWithEmailAndPassword(email, password)
.then(this.onLoginSuccess.bind(this))
.catch(() => {
firebase
.auth()
.createUserWithEmailAndPassword(email, password)
.then(this.onLoginSuccess.bind(this))
.catch(this.onLoginFail.bind(this));
});
}
onLoginFail() {
this.setState({
error: 'Authentication Failed',
loading: false
});
}
onLoginSuccess() {
this.setState({
email: '',
password: '',
loading: false,
error: ''
});
}
renderButton() {
if (this.state.loading) {
return <Spinner size="small" />;
}
return <Button onPress={this.onButtonPress.bind(this)}>Log in</Button>;
}
render() {
return (
<Card>
<CardSection>
<Field
placeholder="user@gmail.com"
label="Email"
value={this.state.email}
onChangeText={email => this.setState({ email })}
/>
</CardSection>
<CardSection>
<Field
secureTextEntry
placeholder="password"
label="Password"
value={this.state.password}
onChangeText={password => this.setState({ password })}
/>
</CardSection>
<Text style={styles.errorTextStyle}>{this.state.error}</Text>
<CardSection>{this.renderButton()}</CardSection>
</Card>
);
}
}
const styles = {
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
};
export default LoginForm;
答案 0 :(得分:3)
您需要将this
绑定到renderButton
,可以使用自动绑定this
的箭头功能,
renderButton = () => { //Arrow function binds this automatically
if (this.state.loading) {
return <Spinner size="small" />;
}
return <Button onPress={this.onButtonPress.bind(this)}>Log in</Button>;
}