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 (
        <div className="form-group">
      <input
        className={classnames('form-control form-control-lg', {
          'is-invalid': error
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        type={type}
      />
      {info && <small className="form-text text-muted">{info}</small>}
      {error && (<div className="invalid-feedback">{error}</div>)}
    </div>
    );
  }
  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 (
      <div className="login">
        <div className="container">
          <div className="row">
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">登录</h1>
              <p className="lead text-center">使用已有的账户登录</p>
              <form onSubmit={this.onSubmit.bind(this)}>
              <TextFieldGroup 
                 type="email"
                 placeholder="邮箱地址"
                 name="email"
                 value={this.state.email}
                 onChange={this.onChange.bind(this)}
                 error={errors.email}
              />
               <TextFieldGroup 
                 type="password"
                 placeholder="密码"
                 name="password"
                 value={this.state.password}
                 onChange={this.onChange.bind(this)}
                 error={errors.password}
              />
                <input type="submit" className="btn btn-info btn-block mt-4" />
              </form>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
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) ;