如何在动态列表中用Checkbox禁用Ant Design DatePicker输入

要实现勾选「当前工作」复选框时禁用对应结束日期输入框的需求，你可以借助Ant Design Form的useForm钩子获取表单实例，通过表单方法动态获取和设置字段值，具体修改如下：

核心改动点 #

• 引入并初始化Form实例，用于读取和修改字段值
• 动态获取当前项的「当前工作」勾选状态，控制结束日期选择器的禁用状态
• 可选优化：勾选时自动清空结束日期，提升表单数据合理性

修改后的完整代码 #

import React from "react";
import { Button, Form, DatePicker, Checkbox, Space } from "antd";
import type { FormInstance } from "antd/es/form";

const App: React.FC = () => {
  const [form] = Form.useForm<{
    experience: Array<{
      startDate: string;
      endDate?: string;
      presentJob: boolean;
    }>;
  }>();

  const onFinish = (values: any) => {
    console.log("Received values of form:", values);
  };

  return (
    <Form
      form={form}
      name="dynamic_form_nest_item"
      onFinish={onFinish}
      style={{ maxWidth: 600 }}
      autoComplete="off"
    >
      <Form.List name="experience">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => {
              // 获取当前项的「当前工作」勾选状态
              const isPresentJob = form.getFieldValue(['experience', name, 'presentJob']) || false;
              
              return (
                <Space
                  key={key}
                  style={{ display: "flex", marginBottom: 8 }}
                  align="baseline"
                >
                  <Form.Item
                    {...restField}
                    name={[name, "startDate"]}
                    rules={[{ required: true, message: "请填写开始日期" }]}
                  >
                    <DatePicker picker="month" />
                  </Form.Item>
                  <Form.Item
                    {...restField}
                    name={[name, "endDate"]}
                  >
                    <DatePicker 
                      placeholder="请选择结束日期" 
                      picker="month" 
                      disabled={isPresentJob}
                    />
                  </Form.Item>
                  <Form.Item {...restField} name={[name, "presentJob"]}>
                    <Checkbox 
                      onChange={(e) => {
                        // 勾选时清空对应结束日期
                        if (e.target.checked) {
                          form.setFieldsValue({
                            experience: form.getFieldValue('experience').map((item: any, index: number) => 
                              index === name ? { ...item, endDate: undefined } : item
                            )
                          });
                        }
                      }}
                    >
                      当前工作
                    </Checkbox>
                  </Form.Item>
                  <span onClick={() => remove(name)} style={{ color: '#165DFF', cursor: 'pointer' }}>删除</span>
                </Space>
              );
            })}
            <Form.Item>
              <Button type="dashed" onClick={() => add()} block>
                添加工作经历
              </Button>
            </Form.Item>
          </>
        )}
      </Form.List>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          提交
        </Button>
      </Form.Item>
    </Form>
  );
};

export default App;

代码说明 #

• 通过form.getFieldValue(['experience', name, 'presentJob'])精准定位当前动态项的勾选状态，实现一对一的禁用控制
• 复选框的onChange事件中，通过form.setFieldsValue更新对应项的结束日期，避免勾选后仍留存无效日期值
• 给删除按钮添加了基础样式，优化交互体验

内容的提问来源于stack exchange，提问作者facuf