在升级到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,
};