React Native + Redux:无法将多个功能附加到单个按钮

时间:2017-09-17 23:14:42

标签: reactjs react-native react-redux

我一直在尝试将Redux实现到React-Native注册应用程序中,我正在努力创建一个多页面表单设置。

为此,我需要相同的按钮来执行两个功能:

导航和状态处理。

我一直遇到麻烦,因为我一直收到错误,告诉我有问题的组件没有附加方法。

有关此问题的代码可在此处查看:

import React from 'react';
import ReactNative from 'react-native';
import { AppRegistry,TextInput,View,StyleSheet} from 'react-native';
import { StackNavigator } from 'react-navigation'; //navigation between pages
import { FormLabel, FormInput,Button,Text } from 'react-native-elements'; //ui 
import  store  from '../store/store'
import { Provider } from  'react-redux';
import Register2   from './namefields';
import { register1 } from '../actions/registration'
import {connect} from 'react-redux'



let styles = {}

class Register1 extends React.Component{ 
  constructor (props) {
    super(props);
    this.state ={
      email: '',
      password: '',
    };
  }

  empaRegister (e) {
      this.props.onRegister1(this.state.email, this.state.password);
      e.preventDefault();
       }

  render() {
    const { navigate  } = this.props.navigation;
    return(
      <View>
        <FormLabel
          containerStyle={styles.labelContainerStyle}>Email</FormLabel>
        <FormInput
          ref='form2'
          containerRef='containerRefYOYO'
          textInputRef='textInputRef'
          placeholder='Please enter your email address...'
          onChangeText = {(newValue) =>this.setState({email:newValue})}
        />
        <FormLabel containerStyle={styles.labelContainerStyle}>Password</FormLabel>
        <FormInput 
          ref='form1' 
          placeholder='Please create a password...'
          onChangeText ={(newValue) =>this.setState({password:newValue}) }
        />
        <Button title="Next" onClick={(e) => this.empaRegister(e); navigate('Register2'); }/>
      </View>
    );
  }
     }

const Application = StackNavigator({
  Register1: {screen: Register1  },
  Register2: {screen: Register2}
});

const mapDispatchToProps = (dispatch) => {
    return {
        onRegister1: (email, password) => { dispatch(register1(email, password)); }
    }
}

export default connect(mapDispatchToProps)(Register1);

1 个答案:

答案 0 :(得分:0)

你缺少一些{}

 onClick={(e) => this.empaRegister(e); navigate('Register2'); }

应该是

 onClick={(e) => {this.empaRegister(e); navigate('Register2'); }}

或者你可以做到

empaRegister (e) {
  this.props.onRegister1(this.state.email, this.state.password);
  navigate('Register2');
}

然后像这样使用它

 onClick={(e) => this.empaRegister(e)}