React+antd封装自定义输入组件

在封装自定义组件之前，我们需要先了解antd官网Form的官方介绍

我们可以知道，Form.getFieldDecorator会为下层组件传递一个value和onChange事件

所以在看了官网介绍后，封装自定义输入（不只是输入，级联选择等等）就很简单了

我们先在界面中写一个父组件

写一个自定义的子组件

界面呈现

在子组件中输入内容

其实这就相当于antd封装的父子组件传值，只是不用自己写方法了而已，在后期的项目中使用这种封装方法是可以省很多时间的，因为不用再想以前自己写传值方法。

下面是源码

Parent.js

import React from 'react';
import styles from './index.css';
import {Form,Input} from 'antd';
import Child from '@/pages/child';

@Form.create()
class Parent extends React.Component{
  render(){
    return (
      

        我是父组件,我的内容是:{this.props.form.getFieldValue('child')||'无'}
        {this.props.form.getFieldDecorator('child')(
          
        )}
      
    );
  }
}

export default Parent;

 

Child.js

import React from 'react';
import {Form,Input} from 'antd';

class Child extends React.Component{
  render(){
    return (
      

        我是子组件,我有一个输入框:
        this.props.onChange&&this.props.onChange(e.target.value)}/>
      
    );
  }
}

export default Child;

如有不对请指正，谢谢。