react+antd表单的动态显示隐藏

最新推荐文章于 2025-03-13 14:33:34 发布

小羊aa

最新推荐文章于 2025-03-13 14:33:34 发布

阅读量2.8k

点赞数 10

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45960031/article/details/135013924

版权

需求：根据表单中某一项的值来控制其他表单项的显示与隐藏，如下图：

在这里插入图片描述

主要代码：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)
  }