好久之前写的，但是突然想起来没写到这里，还是写一下吧~, 也没啥技术含量，就是有需要的同学要是能一下子看到就方便了~
嵌套表单项精髓就是在shouldUpdate属性
注意这句，当
shouldUpdate为 true 时，Form 的任意变化都会使该Form.Item 重新渲染。
要注意 Form.Item 里包裹的
子组件必须由函数返回
我们的示例是当前可选【限制时间】与【不限制时间】，然后【限制时间】的话要把时间填上，切换这个时间的时候，我们所填的限制时间要清空
我们在外层的Form.Item上加上shouldUpdatae属性，如果此项依赖于表单其他getFieldValue方法取出此属性值，再return返回表单项
<Form.Item shouldUpdate className={styles.timesDay}>
{({ getFieldValue }) => {
const timeLimitVal = getFieldValue(‘timeLimit’);
return (
<Form.Item></Form.Item>
)
} <Form.Item>
那我们可以使用那每次【是否限制时间】选项切换的时候，嵌套表单项都可以进行重新渲染，自动清空、是否禁用 等操作，提交表单的时候也会都验证上。
<Form.Item shouldUpdate className={styles.timesDay}>
{({ getFieldValue }) => {
const timeLimitVal = getFieldValue('timeLimit'); // 【是否限制时间】选项取值
return (
<DTIFormItem
bordered={true}
label="限制时段：天"
name="periodDate"
rules={[
// 自定义验证
{
required: timeLimitVal === 1,
},
() => ({
validator(_, value) {
if (timeLimitVal === 0) {
return Promise.resolve();
}
if (!value) {
return Promise.reject(new Error('请选择限制时间段')); // 返回promise表单验证报错项
}
if (
value === 1 ||
value === 2 ||
(value === 3 && selectTime.length !== 0)
) {
return Promise.resolve();
}
if (value === 3 && selectTime.length === 0) {
return Promise.reject(new Error('请选择限制时间段'));
}
},
}),
]}
>
<Radio.Group
onChange={(e) => {
let val = e.target.value;
if (val === 1 || val === 2) {
setSelectTime([]);
}
}}
disabled={!timeLimitVal} // 表单项是否禁用
>
<Space direction="vertical">
<Radio value={1}>每天</Radio>
<Radio value={2}>法定工作日</Radio>
<Radio value={3}>
<Form.Item shouldUpdate>
{({ getFieldValue }) => {
const periodDate = getFieldValue('periodDate'); // 嵌套表单项，选择【自选日期】
return (
<DTIFormItem
bordered={false}
name="selectTime"
className={styles.timeWrapper}
>
<div className={styles.timeTip}>自选日期（全选将等同于每天）</div>
<Checkbox.Group
value={selectTime}
defaultValue={selectTime}
options={TimeRanges}
disabled={!timeLimitVal || periodDate !== 3} // 【自选日期】为某项时不可用
onChange={(val) => {
setSelectTime(val);
sourceForm.validateFields(['periodDate']);
}}
/>
</DTIFormItem>
);
}}
</Form.Item>
</Radio>
</Space>
</Radio.Group>
</DTIFormItem>
);
}}
</Form.Item>
<Form.Item shouldUpdate style={{ marginBottom: 0 }}>
{({ getFieldValue }) => {
const timeLimitVal = getFieldValue('timeLimit');// 此处代码是取【是否限制时间】这个表单项
return (
<DTIFormItem
label="限制时段：时间"
name="rangeTime"
bordered={true}
id={styles.detail}
className={!timeLimitVal ? styles.disabledTime : ''}
rules={[
// 自定义验证
() => ({
validator(_, value) {
console.log(value);
console.log(timeLimitVal);
if (value) {
if (timeLimitVal === 1 && value.length !== 2) {
return Promise.reject(new Error('请选择限制时间段'));
} else {
return Promise.resolve();
}
} else {
return Promise.reject(new Error('请选择限制时间段'));
}
},
}),
]}
>
<TimePicker.RangePicker
bordered={false}
format="HH:mm"
disabled={!timeLimitVal ? true : false}
style={{ height: '36px' }}
suffixIcon={<DTIIcon type="icon-xialazhankai" />}
></TimePicker.RangePicker>
</DTIFormItem>
);
}}
</Form.Item>
代码不是完整的，但重要的思路与精髓都列出来啦，如果大家有疑问的给我留言吧~
