react中利用context简单封装公共表单组件

react中的context利用上下文简单封装公共表单组件

1. 创建上下文组件并导出

import React from "react"
const ctx=React.createContext()  //创建上下文文件
export const Provider=ctx.Provider
export const Consumer=ctx.Consumer
export default ctx

2. 创建formComp组件

import React, {Component} from 'react'
import {Provider} from './form-context'
import FormInput from './FormInput'
export default class FormComp extends Component {
  
    state = {
        formData: {},    //保存创建的表单name和value
        // 修改表单的方法通过上下文传递给表单使用，修改formData储存的值
        inputChange: (name,newValue) => {
            this.setState({
                formData:{
                    ...this.state.formData,
                    [name]:newValue
                }
            })
        },
        submit:()=>{
            this.props.onSubmit(this.state.formData)
        }
    }
    render() {
        return ( 
            <div>
                {/* 使用Provider包裹，里面的组件通过children属性传递 */}
                <Provider value = {this.state}>    
                    {this.props.children} 
                </Provider> 
            </div>
        
        )
    }
}

FormComp.FormInput = FormInput
FormComp.FormButton = FormButton


//把input组件挂载到FormComp类组件的属性上，后面使用可以更方便如:账号:<FormComp.FormInput name="loginId" />

3.创建FormInput组件

import React, { Component } from 'react'
import ctx from '../form-context'     //导入上下文
import PropTypes from 'prop-types'   //导入类型约束js库
export default class FormInput extends Component {
    static contextType=ctx                //类型指向ctx，后面直接可以用this.context
    static propTypes={
        name:PropTypes.string.isRequired,   //文本框名称
        type:PropTypes.string.isRequired    //文本框类型
    }
    static defaultProps={
        type:'text'
    }
  render() {
    return (
      <div>
        <input name={this.props.name} type={this.props.type} value={this.context.formData[this.props.name] || ''} onChange={(e)=>{this.context.inputChange(this.props.name,e.target.value)}}/>
      </div>
    )
  }
}

4.创建FormButton组件，与formComp组件的submit属性相关联

import React from 'react'
import {Consumer} from '../form-context'
import PropTypes from 'prop-types'
export default function FormButton(props) {
// 函数组件使用consumer来获取上下文，children组件是一个函数，参数为上下文，返回值为我们需要显示的组件
  return (
    <div>
        
        <Consumer>
            {context=>(<button onClick={context.submit}>{props.text}</button>)}
        </Consumer>
    </div>
  )
}
FormButton.propTypes={
    text:PropTypes.string.isRequired
}
FormButton.defaultProps={
    text:'提交'
}

5.在需要的地方引用FormComp组件

import React, { Component } from 'react'
import FormComp from './components/FormComp'
export default class App extends Component {
  render() {
    return (
      <div>
        {/* onSubmit关联button点击，即可获取Formdata数据，则可以提交给后台登录数据从而判断登录 */}
        <FormComp onSubmit={(formData)=>{
             console.log(formData);
          }}>
          账号:<FormComp.FormInput name="loginId" />
          密码:<FormComp.FormInput name="loginPassword" type='password'/>
          <FormComp.FormButton text='提交表单'/>
        </FormComp>
      </div>
    )
  }
}