react框架ant design form表单getFieldDecorator接管自定义组件的值

最新推荐文章于 2023-10-13 15:44:12 发布

fuckingVictory

最新推荐文章于 2023-10-13 15:44:12 发布

阅读量1.3k

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/weixin_44570977/article/details/102491388

版权

本文介绍如何在Ant Design的Form组件中使用getFieldDecorator来管理自定义年份选择器组件的值，实现表单与自定义组件的数据双向绑定。

摘要由CSDN通过智能技术生成

话不多说,自定义组件如下图所示,为一个年份选择器
在这里插入图片描述
自定义组件代码如下所示

import React, { Component } from 'react';
import { Select } from 'antd';

const { Option } = Select;

class YearPicker extends Component {
  getYears = ({ startYear, endYear }) => {
    const years = [];
    // eslint-disable-next-line no-plusplus
    for (let i = endYear; i >= startYear; i--) {
      years.push({ title: `${i}年`, value: i });
    }

    return years;
  };

  render() {
    const { startYear = 1994, endYear = new Date().getFullYear() } = this.props;
    const {
      onChange,
      value = '',
    } = this.props; /*
    被getFieldDecorator包裹的父组件会向子组件传递传递若干个参数,
    具体传了哪些参数可自行consle.log,onChange[类型为function]是我们向父组件传递value的桥梁,
    通过向onChange传递当前子组件的值,则完成了getFieldDecorator对该自定义组件值的接管
  */

    return (
      <div styl