Question

首先，我想说我是新手，反应原生并做出反应，所以如果我做的事情完全错了，请告诉我。

目前我正在使用react-native 0.48.4中的登录功能构建一个应用程序。首先，我想在开始使用API调用之前创建一个硬编码的登录函数，我的项目结构是这样的：

./ src / components / login / 登录界面使用的所有组件
./ SRC /画面/ loginscreen.component.js

＆＃13;

export default class LoginScreenComponent extends Component {
    render () {
        return (
            <KeyboardAvoidingView behavior={'padding'} style={styles.loginContainer}>
                <LogoComponent/>
                <TextLogoComponent/>
                <LoginFormComponent login={() => { this.login(); }}/>
            </KeyboardAvoidingView>

        );
    }
    
    login (email, password) {
        console.log(email); //prints undefined
        if (email == 'test' && password == 'test') {
            this.props.navigation.navigate('LoggedIn');
        } else {
            Alert.alert(
                'Oops',
                'Wrong username or password, please try again.',
                [
                    {text: 'OK'},
                ],
                { cancelable: false }
            );
        }
    }
}

＆＃13;

正如您所看到的，我将登录函数作为属性传递给LoginFormComponent。

＆＃13;

export default class LoginFormComponent extends Component {
    constructor (props) {
        super(props);
    }

    state = {
        email: '',
        password: '',
    };

    render () {
        return (
            <View style={styles.container}>
                <UserInput placeholder={'E-mail'} onChangeText={(email) => this.setState({email})} value={this.state.email}/>
                <UserInput placeholder={'Password'} onChangeText={(password) => this.setState({password})} value={this.state.password} secureTextEntry={true}/>
                <Button text={'Login'} onPress={() => {this.onLoginPress(); }}/>
                <TouchableHighlight>
                    <Text style={styles.text}>
                        Forgot password?
                    </Text>
                </TouchableHighlight>
            </View>
        );
    }

    onLoginPress () {
        console.log(this.state.email); //prints the email correctly
        this.props.login(this.state.email, this.state.password);
    }
}

LoginFormComponent.propTypes = {
    login: PropTypes.func.isRequired
}

＆＃13;

在LoginFormComponent中，我调用函数onLoginPress（），该函数使用参数this.state.email和this.state.password调用属性函数login。如果我执行此代码，则在传递this.props.login函数之前定义this.state.email（和this.state.password），但在到达实际登录函数时未定义。我的问题是，在react-native中通过属性函数传递参数的正确方法是什么？

按下按钮时的控制台日志示例：

test@test.nl 未定义

Answer 1

将行更改为：

<LoginFormComponent login={(email, password) => { this.login(email, password); }}/>

在上面提到的行中，您不接受任何参数，因此函数login(email, password)没有接收任何参数。这导致email和password值为undefined。

react-native属性函数参数未通过

1 个答案: