获取"无法阅读财产&attachToForm'未定义"升级到最新的包后

时间:2016-04-22 10:41:49

标签: reactjs material-ui formsy-material-ui formsy-react

在升级到formsy-material-ui(0.4.0),formsy-react(0.18.0)和material-ui(0.15.0-beta.1)到最新版本之后,我一直被困住,总是得到{{ 1}}在升级模块之前,一切正常。

尝试了几个没有运气的选项。

发布登录组件代码,该代码将我们带到另一条路线Cannot read property 'attachToForm' of undefined,但在此之前就看到了attachToFrom错误。

我对ReactJS相当新,所以也可以提供任何其他反馈来改进代码(如果有的话)。

ccall

这是我的package.json

import React from "react";
import Formsy from 'formsy-react';

import { Router, Route, IndexRoute, hashHistory, browserHistory } from "react-router";
import axios from 'axios';

import Config from '../config';

import lightBaseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

import { FormsyCheckbox, FormsySelect, FormsyText } from 'formsy-material-ui/lib';9


const styles = {
  block: {
    maxWidth: 200,
    display:'inline-block',
    marginTop: '5px'
  },
  btnPos: {
    float: 'right',
    textTransform:'initial'
  },
  checkboxFpassword: {
    marginTop: 10,
  },
};

window.loginData = {};

export default class Login extends React.Component {

    constructor(props, context) {
        super(props, context)

        this.state = {
            error: false,
            invalidUser: false,
      errorMsg: '',
            networkError: false,
            checked: true,
            canSubmit: false,
            errorMessages: {
            emailError: "Please enter a valid email or mobile",
            passwordError: "Password should be alphanumeric!"
                }
            },

            this.loginSuccess = this.loginSuccess.bind(this);
            this.loginError = this.loginError.bind(this);
    }


  enableButton = () => {
    this.setState({
      canSubmit: true
    });
  }

  disableButton = () => {
    this.setState({
      canSubmit: false
    });
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(lightBaseTheme)};
  }

  submitForm = (model) => {
      this.handleSubmit(model)
  }

  loginSuccess (response) {
    if (response.data && (response.data.Response && response.data.ResponseCode === "Success")) {
      loginData = Object.assign(loginData, response.data.Response);
      console.info("loginData =>", loginData);
      //browserHistory.push('ccall');
            //router.push('ccall');
      this.context.router.replace('ccall');
    } else if (response.data.ResponseCode === "Failure"){
      this.setState({
        errorMsg: response.data.ErrorMessage
      });
    } else {
        console.log(response.data.ErrorMessage);
        this.setState({ invalidUser: true });
    }
  }

  loginError (response) {
    if (response instanceof Error) {
      console.error('Error', response.message);
      this.setState({ networkError: true });
    } else {
      this.setState({ networkError: true });
    }
  }

    handleSubmit = (data) => {
    console.log("handleSubmit this.state.canSubmit", this.state.canSubmit);
    if (this.state.canSubmit) {
      this.checkLogin(data);
    }
  }

  checkLogin (data) {
    let config = {
      email: data.email,
      password: data.password
    }

    let configParams = config.email + '/' + config.password;

    console.info("configParams", configParams);

    axios.get(Config.urls.login + configParams)
    .then(this.loginSuccess)
    .catch(this.loginError);
  }

  render() {

    return (

        <div class="container login-container">
      <div class = "logo">
        <img src="./images/ezycare-logo.png" alt=""/>
      </div>
                <Formsy.Form
                onValid={this.enableButton}
                onInvalid={this.disableButton}
                onValidSubmit={this.submitForm}
              >

         <FormsyText
           name='email'
           validationError={this.state.errorMessages.emailError}
           required
           floatingLabelText="Email/Mobile"
           style = {{width: '100%'}}
         />

         <FormsyText
           name='password'
           required
           floatingLabelText="Password"
           type="password"
           style = {{width: '100%'}}
         />
              {this.state.invalidUser && (
            <p class="error">Invalid username or password, please try again!</p>)}
            {this.state.networkError && (
            <p class="error">Network error, please check your internet connection!</p>)}
            {this.state.errorMsg !== '' && (
            <p class="error">{this.state.errorMsg}</p>)}

            <RaisedButton 
                label="Sign in" 
                primary={true}
                //disabled={!this.state.canSubmit}
            backgroundColor="#00AEEF"
            fullWidth={true}
                type="submit"
          />
            <br />

            <div style={styles.checkboxFpassword}>
              <FormsyCheckbox
                name="agree"
                label="Remember me"
                defaultChecked={true}
                style={styles.block}
              />

              <FlatButton 
                label="Forgot Password" 
                style={styles.btnPos}
              />
            </div>

          </Formsy.Form>

            </div>
    );
  }

}

Login.contextTypes = {
  router: React.PropTypes.object.isRequired
}

//the key passed through context must be called "muiTheme"
Login.childContextTypes = {
  muiTheme: React.PropTypes.object.isRequired,
};

0 个答案:

没有答案