我试图在我的登录页面中呈现此登录表单,但我得到的是"登录表单未定义"。我是否可以不将类组件渲染到另一个类组件中,或者是某个状态会产生冲突,还是有一个我没看到的拼写错误?
此外,这样做的正确方法是什么?
文件夹树:SignIn(index.js,actions.js,LoginForm.js)
LoginForm.js:
import React from 'react';
import styled from 'styled-components';
import { login } from './actions';
import { connect } from 'react-redux';
import validateInput from '../../../server/middlewares/routes/shared/validation/loginvalidation';
const Form = styled.form`
position: absolute;
left: 40%;
top: 20%;
`;
const Input = styled.input`
border-bottom: 2px solid red;
background-color: transparent;
`;
const Button = styled.button`
background-color: red;
width: 100px;
height: 50px;
`;
class LoginForm extends React.Component {
constructor(props) {
super(props);
this.state = {
identifier: '',
password: '',
errors: {},
isLoading: false
};
this.onSubmit = this.onSubmit.bind(this);
this.onChange = this.onChange.bind(this);
}
isValid() {
const { errors, isValid } = validateInput(this.state);
if (!isValid) {
this.setState({ errors });
}
return isValid;
}
onSumit(e) {
e.preventDefault();
if (this.isValid()) {
this.setState({ errors: {}, isLoading: true });
this.props.login(this.state).then(
(res) => this.context.router.push('/'),
(err) => this.setState({ errors: err.data.errors, isLoading: false })
);
}
}
onChange(e) {
this.setState({ [e.target.name]: e.target.value });
}
render() {
const { errors, identifier, password, isLoading } = this.state;
return (
<Form onSubmit={this.onSubmit}>
<h1> Login </h1>
<Input
field="identifier"
label="Username / Email"
value={identifier}
error={errors.indentifier}
onChange={this.onChange}
/>
<Input
field="password"
label="Password"
value={password}
error={errors.password}
onChange={this.onChange}
type="password"
/>
<Button disabled={isLoading}> LOGIN </Button>
</Form>
)
}
}
// LoginForm.propTypes = {
// login: React.PropTypes.func.isRequired
// }
// LoginForm.contextTypes = {
// router: React.PropTypes.object.isRequired
// }
// export default connect(null, { login })(LoginForm);
export default LoginForm;
index.js:
import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import LoginForm from './LoginForm';
const FormWrapper = styled.div`
position: absolute;
left: 40%;
top: 30%;
height: 400px;
width: 400px;
background-color: red;
`;
class LoginPage extends React.Component {
render() {
return (
<div>
<h1>weEWRWER</h1>
<FormWrapper>
<LoginForm />
</FormWrapper>
</div>
)
}
}
export default LoginPage;
答案 0 :(得分:0)
这只是一个错字onSumit
- &gt;第49行onSubmit
LoginForm