Question

我有2个组件LoginView和LoginLogic。

LoginView处理UI，而LoginLogic处理计算。我想知道如何将我的电子邮件和密码属性从LoginView传递给LoginLogic。

这是我的代码-

LoginView.js

onLoginPressed = () => {
        //Here I need to pass email and pwd to LoginLogic. There is a method by name loginUser that takes email and password as method parameters

    }

    render() {
        return (

                <View>

                    <TextInput onChangeText={(text) => this.setState({ email: text })}>
                    </TextInput>
                    <TextInput onChangeText={(text) => this.setState({ password: text })}>
                    </TextInput>
                    <TouchableHighlight onPress={this.onLoginPressed} style={styles.button}>
                        <Text style={styles.buttonText}>Login </Text>
                    </TouchableHighlight>
                </View>

        );
    }

如何在onLoginPressed()时将电子邮件和密码传递给LoginLogic.js？

Answer 1

您可以在LoginView.js中导入loginUser方法，然后在onLoginPressed函数中调用它。

import { loginUser  } from '../anypath/LoginLogic.js'; //up next to others imports

onLoginPressed = () => {
 const { password, email } = this.state
 loginUser(email, password);
}

但是，如果LoginLogic是类组件，则应该以另一种方式考虑。让我们知道是否有帮助，并向我们提供有关LoginLogic的更多信息。

尝试更多地了解redux。对于appState和调度动作非常有帮助。

Answer 2

我认为您应该修改您的应用架构。 React为您提供了一个组件模型，据我所知，您不应在其中分离计算组件和视图组件，而应保持组件可重用，从而实现自给自足且紧凑。

此外，React还依赖于层次结构树结构，因此，在深入树的各个方面时，应始终尝试降低抽象级别。从一般到具体-可能保持主应用程序逻辑/状态尽可能高，并通过props将数据传递给需要它的组件。如果您的应用程序和状态管理变得更加复杂，请开始考虑使用Flux / Redux或React Context API。

也许退后一步，再看看https://reactjs.org/docs/thinking-in-react.html

从第一个组件反应本机调用第二个组件的方法

2 个答案: