1. 处理身份证号的函数
function getAgeSexAndBirthdate(idCard: string): { sex: '男' | '女' | null; birthdate: Date | null } {if (idCard.length !== 18) {console.error('身份证号码必须是18位。');return { sex: null, birthdate: null };}// 提取出生年月日const year = parseInt(idCard.substring(6, 10));const month = parseInt(idCard.substring(10, 12));const day = parseInt(idCard.substring(12, 14));const birthDate = new Date(year, month - 1, day); // 注意月份是从0开始的// 判断性别const sex = parseInt(idCard.charAt(16)) % 2 === 0 ? '女' : '男';return { sex, birthdate: birthDate };
}思路：
- 根据身份证号的第7到14位提取出生日期。
- 根据身份证号的第17位判断性别。
2. 监听身份证号变化的函数
function handleIdCardChange(e) {const newIdCard = e.target.value;const { sex: newSex, birthdate: newBirthdate } = getAgeSexAndBirthdate(newIdCard);if (newBirthdate != null) {const dateStart = newBirthdate;const birthdayHappy = `${dateStart.getFullYear()}-${String(dateStart.getMonth() + 1).padStart(2, '0')}-${String(dateStart.getDate()).padStart(2, '0')}`;setFormattedDateStart(birthdayHappy); // 生日输入框赋值console.log(newSex, formattedDateStart);setSex(newSex || '');setBirthdate(formattedDateStart || '');}
}思路：
- 当身份证号输入框发生变化时触发此函数。
- 调用
getAgeSexAndBirthdate函数计算出性别和出生日期。 - 将计算结果更新到对应的state中，并设置到表单项中。
3. 在表单中绑定身份证号输入框
<Form.Item name="idcard"><inputtype="text"defaultValue={form.getFieldValue('idcard')}onChange={handleIdCardChange} // 绑定身份证号变化事件requireddisabledstyle={{width: '100%',fontSize: '14px',borderRadius: '5px',border: '1px solid #ccc'}}/>
</Form.Item>思路：
- 在身份证号输入框上绑定
onChange事件，当输入框内容改变时会触发handleIdCardChange函数。
4. 设置性别和生日到表单项
form.setFieldsValue({...sex: sex, // 性别birthday: moment(birthdate), // 生日...
});思路：
- 在展示详情时，根据身份证号计算出的性别和生日设置到表单项中，以便回显。
这些代码片段共同实现了从身份证号自动解析出性别和出生日期，并将其回显到表单中的功能。
