reactjs - 升级到最新软件包后出现“无法读取未定义的属性'attachToForm'”

Question

在升级到最新版本的formy-material-ui（0.4.0），formy-react（0.18.0）和material-ui（0.15.0-beta.1）后，我一直卡住，总是Cannot read property 'attachToForm' of undefined在升级模块之前，一切正常。

尝试了几种选择，但没有任何运气。

发布将我们带到另一条路线ccall但在此之前看到 attachToFrom 错误的登录组件代码。

我对 ReactJS 还很陌生，所以如果有的话，我也可以提供任何额外的反馈来改进代码。

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,
};

这是我的 package.json

{
  "name": "test",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "axios": "^0.9.1",
    "formsy-material-ui": "^0.4.0",
    "history": "^2.1.0"
  },
  "peerDependencies": {
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-router": "^2.3.0",
    "react-tap-event-plugin": "^1.0.0",
    "material-ui": "0.15.0-beta.1"
  },
  "devDependencies": {
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.0.14",
    "babel-eslint": "^6.0.0",
    "eslint": "^2.5.1",
    "eslint-plugin-react": "^4.0.0",
    "formsy-react": "^0.18.0",
    "material-ui": "0.15.0-beta.1",
    "react": "^15.0.1",
    "react-dom": "^15.0.1",
    "react-router": "^2.3.0",
    "react-tap-event-plugin": "^1.0.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot --host localhost --port 4444",
    "prod": "webpack --env=production",
     "lint": "eslint src && echo \"eslint: no lint errors\""
  },
  "license": "ISC"
}