React 子组件封装

需求:有很多个input框,都为输入的input,这个时候需要封装一个组件

子组件:

// 封装input输入框
import React from 'react'
import classnames from 'classnames'
// 定义返回的数据类型
import PropTypes from 'prop-types'

const TextAreaFieldGroup = ({//相当于形参
    name,
    type,
    placeholder,
    value,
    error,
    info,
    onChange,
  }) =>{
    return (
        

      
      {info && {info}}
      {error && (
{error}
)}
    
    );
  }
  TextAreaFieldGroup.propTypes = {
    name: PropTypes.string.isRequired,
    placeholder: PropTypes.string,
    value: PropTypes.string.isRequired,
    info: PropTypes.string,
    error: PropTypes.string,
    onChange: PropTypes.func.isRequired
  };
//   设置type 的默认类型
TextAreaFieldGroup.defaultProps ={
    type:'text'
}
  
  export default TextAreaFieldGroup;

父组件引入并使用:

import React, { Component } from 'react'
// 实现ui组件和数据连接
import {connect } from 'react-redux'
// 定义返回的数据类型
import PropTypes from 'prop-types'
// 引入redux中的authAtcion.js/loginUser定义的方法
import {loginUser} from '../../actions/authAchtions'
import classnames from 'classnames'
//引入封装好的Input组件
import TextFieldGroup from '../../common/TextFieldGroup'

class Login extends Component {
  constructor(props){
    super(props)
    this.state={
      password:'',
      email:'',
      errors:{}
    }
  }
onChange(e){
    this.setState ({[e.target.name] : e.target.value})
  }
  onSubmit(e){
    e.preventDefault()
    const newUser ={
      password:this.state.password,
      email:this.state.email
    }
    // 点击登录的时候把数据存入redux的authActions.js中
    this.props.loginUser(newUser)
  }
  
  componentDidMount(){//模块渲染后
    if(this.props.auth.isAuthenticated){// 判断是否授权,如果是授权的就证明是在登入状态,再进登录页面就进不了
      this.props.history.push('/dashboard')
    }
  }
  //           /rɪ'siv/
  componentWillReceiveProps(nextprops){//组件数据变化
    console.log(nextprops.auth.isAuthenticated)
    console.log(nextprops.errors)
    // 判断auth集合下的isAuthenticated验证是否为true如果是就代表成功,那么跳转页面
    if(nextprops.auth.isAuthenticated){
      this.props.history.push('/dashboard')
    }
    if(nextprops.errors){//对返回回来的错误数据进行state赋值
      this.setState({
        errors:nextprops.errors
      })
    }
  }
  render() {
       // 从mapStateToProps解构出errors信息
       const {errors} = this.state;
    return (
      

        

          

            

              
登录
              
使用已有的账户登录
              

              
               
                
              
            
          
        
      
    )
  }
}
loginUser.PropTypes ={
  // 判断返回的数据类型
  loginUser:PropTypes.func.isRequired,
  auth:PropTypes.object.isRequired,
  errors:PropTypes.object.isRequired,
}
// 将返回的状态转换成属性
const mapStateToProps = (state) =>({
  // auth 在reducers下定义的一大的reducers
  auth :state.auth,
  errors:state.errors
})

export default connect(mapStateToProps,{loginUser})(Login) ;