antd 基于复选框禁用字段

Question

我在 ant 设计库中使用动态表单 我创建复选框，我想要做的是禁用这个基于时间选择器的字段 复选框是否选中 我该怎么做呢

const Demo = () => {
    const onFinish = (values) => {console.log(values)};
    return (
            <Form
            >
                
                {/* dynamically created card */}
                <Form.List name="except">
                    {(fields, { add, remove }) => (
                            {fields.map((field) => (
                                <Space key={field.key}>
                                    <MinusCircleOutlined
                                        onClick={() =>remove(field.name)}/>

                                    <Form.Item
                                        {...field}
                                        valuePropName={[field.name,'checked']} className="mb-3"
                                    >
                                        <Checkbox>مغلق</Checkbox>
                                    </Form.Item>

                                    {/* ------------- from_hour -------------*/}
                                        <Form.Item
                                            {...field}
                                            name={[field.name,'from_hour']}
                                            fieldKey={[field.fieldKey,'from_hour']}
                                        >
                                            <TimePicker
                                                use12Hours
                                                placeholder="اختر"
                                                format="hh:mm A"
                                            />
                                        </Form.Item>
                                </Space>
                            ))}
                    )}
                </Form.List>
                </Form>
    );
};

Answer 1

你需要状态。您可以控制复选框的选中值并使用该状态有条件地呈现另一个表单项。

the docs 中有一个这种行为的示例。