Question

我上了这个课：

import * as React from "react";
import { Item, Input, Icon, Form, Toast } from "native-base";
import { Field, reduxForm } from "redux-form";
import Login from "../../stories/screens/Login";

import { auth } from "../../boot/firebase";

const required = value => (value ? undefined : "Required");
const maxLength = max => value => (value && value.length > max ? `Must be ${max} characters or less` : undefined);
const maxLength20 = maxLength(20);
const minLength = min => value => (value && value.length < min ? `Must be ${min} characters or more` : undefined);
const minLength8 = minLength(8);
const email = value =>
    value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) ? "Invalid email address" : undefined;
const alphaNumeric = value => (value && /[^a-zA-Z0-9 ]/i.test(value) ? "Only alphanumeric characters" : undefined);

export interface Props {
    navigation: any;
    valid: boolean;
    email: string;
    password: string;
}
export interface State {
    navigation: any;
    valid: boolean;
    email: string;
    password: string;
}

class LoginForm extends React.Component<Props, State> {

    textInput: any;

    constructor(props: Props) {
        super(props);

        this.state = ({
            navigation: "",
            valid: false,
            email: "",
            password: ""
        });

        this.onChange = this.onChange.bind(this);

        const _this = this;
    }

    onChange = (prop, state) => {
        if (prop === "email") this.setState({ ...this.state, email: state });
        if (prop === "password") this.setState({ ...this.state, password: state });
    }

    renderInput({ input, meta: { touched, error } }) {

        return (
            <Item floatingLabel error={error && touched}>
                <Icon style={{ color: "#fff" }} active name={input.name === "email" ? "person" : "unlock"} />
                <Input
                    autoCapitalize="none"
                    autoCorrect={false}
                    style={{ color: "#fff" }}
                    placeholderTextColor="#fff"
                    ref={c => (this.textInput = c)}
                    placeholder={input.name === "email" ? "Email" : "Password"}
                    secureTextEntry={input.name === "password" ? true : false}
                    onChangeText={input.name === "email" ? (email) => this.onChange("email", email) : (password) => this.onChange("password", password)}
                    {...input}
                />
            </Item>
        );
    }

    login = (email, password) => {

        try {
            auth.createUserAndRetrieveDataWithEmailAndPassword(email, password)
                .then(res => {
                    console.log("USUARIO CREADO", res);

                    if (this.props.valid) {
                        this.props.navigation.navigate("Home");
                    } else {
                        Toast.show({
                            text: "Enter Valid Username & password!",
                            duration: 2000,
                            position: "top",
                            textStyle: { textAlign: "center" },
                        });
                    }
                })
                .catch(error => {
                    console.warn("ERROR CREANDO USUARIO", error.toString());
                    Toast.show({
                        text: error.toString(),
                        duration: 2000,
                        position: "top",
                        textStyle: { textAlign: "center" },
                    });
                })
        } catch (error) {
            console.warn(error.toString());
        }
    }

    render() {
        const form = (
            <Form>
                <Field
                    name="email"
                    component={this.renderInput}
                    validate={[email, required]}
                />
                <Field
                    name="password"
                    component={this.renderInput}
                    validate={[alphaNumeric, minLength8, maxLength20, required]}
                />
            </Form>
        );
        return <Login loginForm={form} onLogin={() => this.login(this.props.email, this.props.password)} />;
    }
}
const LoginContainer = reduxForm({
    form: "login",
})(LoginForm);
export default LoginContainer;

我想在这里更改状态：

onChangeText={input.name === "email" ? (email) => this.onChange("email", email) : (password) => this.onChange("password", password)}

但是我得到“ this.onChange未定义”。我知道这与范围有关，但我不知道是什么。

我尝试了bind _this = this;，但没有成功。

Answer 1

由于__closure__函数不是箭头函数，因此调用时renderInput的值会更改。您需要将其定义为箭头函数，以确保this引用正确的对象：

this

无法在课堂内达到功能

1 个答案: