Antd Forms：动态设置字段的最小值

Question

我得到了一个使用 antd (5.x) 表单的表单。当满足某个条件时，我想动态限制日期字段的最小值。

我知道antd中有所谓的FormInstance方法。例如。这个动态设置字段的值：

form.setFieldValue('birth_date', '2020-01-01')

动态设置表单项的 props 是否有类似的东西？类似于

form.setPropValue('birth_date', {min: '2000-01-01'}

？

Answer 1

本示例来自 Ant Design 官方文档。

import React from 'react';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';

dayjs.extend(customParseFormat);

const dateFormat = 'YYYY-MM-DD';

const App: React.FC = () => (
  <DatePicker
    defaultValue={dayjs('2019-09-03', dateFormat)}
    minDate={dayjs('2019-08-01', dateFormat)}
    maxDate={dayjs('2020-10-31', dateFormat)}
  />
);

export default App;

如果我们考虑上面的代码，我们可以将 minDate 和/或 maxDate 存储到它自己的 useState 中（甚至 redux 状态）。

这样您就可以动态控制日期范围，用户可以从中选择日期。

注意，该组件可以集成到表单中，以便您可以使用它。

注意，此代码是 TypeScript 语言，如果您想要 JS 语言，可以选择（II.），如下图所示。