antd Form表单 和 日期控件DatePicker一起使用,点击form的label也会有弹出事件

背景介绍：

在使用antd组件Form表单时，将日期组件DatePicker添加到Form.Item中，会出现点击表单的label(图片1)绑定了打开日期组件的事件(图片2)

图片1

图片2

原因解析

总结：label组件的htmlFor属性绑定了Form.Item的name属性值，DatePicker的id也被绑定了name属性值,当用户点击 <label> 元素时,相关的表单控件也会获得焦点

antd源码解析

1.FormItemLabel组件源码中将label标签的htmlFor属性绑定了变量:htmlFor

<Col {...mergedLabelCol} className={labelColClassName}>
     <label
        htmlFor={htmlFor}
        className={labelClassName}
        title={typeof label === 'string' ? label : ''}
      >
        {labelChildren}
    </label>
</Col>

链接：antd的FormItemLabel源码

2.ItemHolder组件中使用到了FormItemLabel组件，并给htmlFor属性赋值

<FormItemLabel
    htmlFor={fieldId}
    {...props}
    requiredMark={requiredMark}
    required={required ?? isRequired}
    prefixCls={prefixCls}
    vertical={vertical}
/>

链接：ItemHolder组件源码 

3.FormItem组件中给FieldId赋值为我们在Form.Item中输入的name值,并且给写在Form.Item中的chidren控件的id设置为我们输入的name属性的值

const { name: formName } = React.useContext(FormContext);
const mergedName = toArray(name).length && renderMeta ? renderMeta.name : [];
const fieldId = getFieldId(mergedName, formName);
...
const childProps = { ...mergedChildren.props, ...mergedControl };
if (!childProps.id) {
    childProps.id = fieldId;
}

链接：FormItem组件源码

解决方案：

将Form.Item组件的htmlFor属性设置为null,解除匹配

<Form.Item 
    name="scrapDueTime" 
    label="报废到期时间" 
    htmlFor={null}
    rules={[
        { required: true, message: '请选择报废到期时间' },
    ]}
>
    <DatePicker
        showTime
        style={{ width: '100%' }}
    />
</Form.Item>