构建 react 中可重用灵活的表单组件

组件

受控组件与非受控组件

非受控即 组件内部不存在状态，组件的状态由父组件传入;一般该类型组件用来做数据展示,但不可控制

非受控组件通常我们会写成纯函数想这样:

import React from 'react'

export default function UncontrollForm({
   user}){
   
    return(
        <div className="profile-form">
            <div className="field">
                <label>Name</label>
                <input type="text"
                 readOnly
                 value={
   user.name}
                 />
            </div>
        </div>
    )
}

受控组件

该类型组件,接受父组件传入的数据后,若自身数据更新将数据传递给父组件并更新自身状态
我们一般会这样做:

import React from 'react'
export default class ArrowFncForm extends React.PureComponent{
   
    constructor(props){
   
        super(props);
        this.handleChange=this.handleChange.bind(this);
    }
    handleChange(type,value){
   
        //处理业务逻辑
        console.log(type,'--------',value)
      //传递给父组件
      this.props.onChange(type,value);
    }
    render(){
   
        const {
   user}=this.props;
        return(
            <div className="profile-form">
                <div className="field">
                    <label>Name</label>
                    <input type=