需求:根据表单中某一项的值来控制其他表单项的显示与隐藏,如下图:
主要代码:html
<Form.Item name="intranetFlag" label="系统是否为内网">
<Radio.Group>
<Radio value={0}>是</Radio>
<Radio value={1}>否</Radio>
</Radio.Group>
</Form.Item>
{ intranetFlag == 0 ? <Form.Item name="linkWay" label="服务器连接方式">
<Select
options={LinkOption}
/>
</Form.Item> : ''}
{ intranetFlag == 0 ? <Form.Item name="authCode" label="验证码">
<Input placeholder="请输入" />
</Form.Item> : ''}
{ intranetFlag == 0 ? <Form.Item name="headingCode" label="识别码">
<Input placeholder="请输入" />
</Form.Item> : ''}
{ intranetFlag == 1 ? <Form.Item name="serverName" label="所在服务器">
<Select
onChange={onServeChange}
options={List}
/>
</Form.Item> : ''}
{ intranetFlag == 1 ? <Form.Item name="serverAddr" label="所在服务器地址">
<Input.TextArea allowClear />
</Form.Item> : ''}
js逻辑:
// 主要变量
const [FormVal] = Form.useForm<UpholdType>();
// 使用useWatch动态监听表单
const intranetFlag = Form.useWatch('intranetFlag', FormVal);
const [List, setList] = useState<any[]>();
const LinkOption = [
{label: '向日葵', value: '向日葵'},
{label: 'ToDesk', value: 'ToDesk'},
]
// 使用的方法
const getOptionList = () => {
getPageWebServer({ pageIndex: 1, pageSize: 1000 }).then((res: any) => {
if (res.code == 200) {
const option = res.data.rows.map((item: any) => {
return {
value: item.name,
label: item.name,
ip: item.ip,
};
});
// 从接口中拿到select的option
setList(option);
}
});
};
// 赋值给其他表单
const onServeChange = (value: any) => {
const serverAddr = List?.find((item: any) => item.value == value)
// console.log('表单values', serverAddr, List, value);
FormVal.setFieldValue('serverAddr', serverAddr?.ip)
}