無法在反應中呈現類組件中的其他類組件

我試圖在我的登錄頁面中呈現此登錄表單，但我獲取登錄表單時未定義，我是否可以不將類組件呈現到另一個類組件中，或者是某種狀態？結果產生衝突，或者是有一個錯字我不是還看到究竟是怎麼回事呢這個無法在反應中呈現類組件中的其他類組件

文件夾樹的正確方法：簽到（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;

來源

2017-03-28 HMH

這只是一個錯字onSumit - >onSubmit在LoginForm在線49

來源

2017-03-28 06:42:34

無法在反應中呈現類組件中的其他類組件

回答

相關問題