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) ;

React 子组件封装_第1张图片

你可能感兴趣的