作为道具传递的功能不是功能

时间：2019-07-23 13:25:31

标签： reactjs react-native components react-props

我正在尝试创建一个登录模块。我有一个LoginView，它定义了视图，还有一个LoginController，其中定义了所有用户交互。现在，我尝试合并一个逻辑，其中在LoginController中将更改LoginView的状态，例如在所有输入数据均有效的情况下，将isLoading的值从false更改为true

LoginView 

import React, { Component, Fragment} from 'react';
import LoginController from '../Controller/LoginController.js';

import {
  View,
  ScrollView,
  StatusBar,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   }
});
export default class LoginView extends Component {

   constructor(){
      super()
      this.state = {
         isLoading: false
       }
   }

   changeLoadingState = (currentLoadingState) => {

      /* Create a loader screen and incorporate it here.
      */
      this.setState({isLoading: currentLoadingState} , () => {
         console.log("This is called when this.setState has resolved");
         console.log(this.state.isLoading);
       });
   }

  render() {

    const con = new LoginController(this.changeLoadingState);

     return (
        <Fragment>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
         <View style = {styles.container}>
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {con.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {con.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                    () => con.login()
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
         </SafeAreaView>
         </Fragment>
      );
        }
}

LoginController.js 

import React, { Component } from 'react';
import LoginNetworkManager from '../NetworkManager/LoginNetworkManager.js';
import Loader from '../../Utils/Loader.js';

export default class LoginController extends Component {

      constructor(props) {
         super(props);
         this.state = {
            email: null,
            password: null
         };
         this.changeLoadingState = this.changeLoadingState.bind(this);
      }

      changeLoadingState = (currentLoadingState) => {
         this.props.changeLoadingState(currentLoadingState);
      }

      handleEmail = (text) => {
         this.setState({email: text});
      }
      handlePassword = (text) => {
         this.setState({password: text});
      }

      login = () => {

         this.changeLoadingState(this.validate());
         if (this.validate() == true) {
            // Here in we will call the API
         } else {
            console.log(" It's false ");
            // Do nothing
         }
      }

      validate = () => {
         var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
         var isValid = reg.test(this.email);


         if (isValid) {
            isValid = (this.password.trim().length > 0);
         }

         console.log(" Tis is Valid " + isValid);
         return isValid
      }
   }

点击登录按钮时的错误是

   _this.props.changeLoadingState is not a function
    handleException @ ExceptionsManager.js:86
    handleError @ setUpErrorHandling.js:23
    reportFatalError @ error-guard.js:42
    __guard @ MessageQueue.js:345
    callFunctionReturnFlushedQueue @ MessageQueue.js:105
    (anonymous) @ debuggerWorker.js:80

3 个答案:

答案 0 :(得分：1)

这里的问题是LoginController不是Component，如果您希望LoginController仅是一个帮助类，则应删除state和{{ 1}}：

props

但是，如果您的目标是抽象有状态逻辑，那么您做错了。当您从类扩展export default class LoginController { changeLoadingState = (currentLoadingState) => { } handleEmail = (text) => { } handlePassword = (text) => { } login = () => { this.changeLoadingState(this.validate()); if (this.validate() == true) { // Here in we will call the API } else { console.log(" It's false "); // Do nothing } } validate = () => { var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; var isValid = reg.test(this.email); if (isValid) { isValid = (this.password.trim().length > 0); } console.log(" Tis is Valid " + isValid); return isValid } } 时，您明确告诉React该类是React.Component，因此它应返回Component（render（））并应初始化为Component：{{ 1}}，要抽象出状态逻辑，您实际上有很多很酷的选择：

高阶组件（HOC）

这似乎是您的用例，因为您希望向JSX中注入一些道具，因此可以将逻辑抽象到HOC：

<LoginController />

现在在LoginView内部，您可以这样导出：import React, { Component } from 'react'; import LoginNetworkManager from '../NetworkManager/LoginNetworkManager.js'; import Loader from '../../Utils/Loader.js'; export default withLogin = (ChildComponent) => { return class LoginController extends Component { constructor(props) { super(props); this.state = { email: null, password: null }; this.changeLoadingState = this.changeLoadingState.bind(this); } /* Your logic */ render(){ return <ChildComponent {...this.state} /> } } } 和LoginView的状态将在export default withLogin(LoginView)的props：LoginController和{{ 1}}

当然，使用HOC可以完成的所有操作也可以使用LoginView和this.props.email完成。

答案 1 :(得分：0)

您没有将函数作为道具传递给LoginController组件。

答案 2 :(得分：0)

感谢Dupocas的答复，我了解何时使用组件以及何时不使用组件。

在我的情况下，LoginController不应是组件，因为逻辑上没有要呈现的内容。它纯粹是一个助手类。

结果代码如下所示

import React, { Component, Fragment} from 'react';
import LoginController from '../Controller/LoginController.js';
import Loader from '../../Utils/Loader';

import {
  View,
  StatusBar,
  SafeAreaView,
  TextInput,
  TouchableOpacity,
  Text,
  StyleSheet
} from 'react-native';

const styles = StyleSheet.create({
   container: {
      paddingTop: 23
   },
   input: {
      margin: 15,
      height: 40,
      borderColor: '#7a42f4',
      borderWidth: 1
   },
   submitButton: {
      backgroundColor: '#7a42f4',
      padding: 10,
      margin: 15,
      height: 40,
   },
   submitButtonText:{
      color: 'white'
   }
});
export default class LoginView extends Component {

   constructor(){
      super()
      this.state = {
         isLoading: false
       }
       con = new LoginController();
   }

   changeLoadingState = (currentLoadingState,completionBlock) => {
      this.setState({isLoading: currentLoadingState} , completionBlock);
   }

  render() {
     return (
        <Fragment>
        <StatusBar barStyle="dark-content" />
        <SafeAreaView>
         <View style = {styles.container}>
         <Loader
          loading={this.state.isLoading} />
            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Email"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {con.handleEmail}/>

            <TextInput style = {styles.input}
               underlineColorAndroid = "transparent"
               placeholder = "Password"
               placeholderTextColor = "#9a73ef"
               autoCapitalize = "none"
               onChangeText = {con.handlePassword}/>

            <TouchableOpacity
               style = {styles.submitButton}
               onPress = {
                    () => con.login(this.changeLoadingState)
               }>
               <Text style = {styles.submitButtonText}> Submit </Text>
            </TouchableOpacity>
         </View>
         </SafeAreaView>
         </Fragment>
      );
        }
}

LoginController是

import LoginNetworkManager from '../NetworkManager/LoginNetworkManager.js';
export default class LoginController  {

     email = null;
     password = null;

   changeLoadingState = (currentLoadingState,viewCallback,completionBlock) => {
      viewCallback(currentLoadingState,completionBlock);
      }

      handleEmail = (text) => {
         this.email = text
      }
      handlePassword = (text) => {
         this.password = text
      }

      login = (viewCallback) => {

         this.changeLoadingState(this.validate(),viewCallback);
         if (this.validate() == true) {

            let params = { email : this.email, password : this.password};

            LoginNetworkManager.loginAPI(params, (response,error) => {

               this.changeLoadingState(false,viewCallback,() => {

                  if (error){

                  }else{

                  }
                });
            });
         } 
      }

      validate = () => {
         var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
         var isValid = reg.test(this.email);

         console.log(" this.email " + this.email);
         console.log(" this.password " + this.password);
         if (isValid) {
            isValid = (this.password.trim().length > 0);

            console.log(" password validation ----> " + isValid);
         }


         return isValid
      }
   }

尽管，Dupocas提到了有关HOC，RenderProps和Hooks的问题，但我相信，如果我不需要组件，则应该以非组件的方式尝试它，尽管它很有见识，并且可能对以后的复杂工作有帮助场景。

相关问题
最新问题