无法在反应中的另一个 class 组件内呈现 class 组件

Question

我试图在我的登录页面中呈现此登录表单，但我得到 "login form is undefined"。我不能将一个 class 组件渲染到另一个 class 组件中，或者是某个状态造成了冲突，还是有我没有看到的拼写错误？

此外，正确的做法是什么？

文件夹树：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;

Answer 1

这只是第 49 行 LoginForm 中的一个错字 onSumit -> onSubmit

无法在反应中的另一个 class 组件内呈现 class 组件

Cannot render a class component inside another class component in react

reactjs

routes

redux

components

react-boilerplate