antdesign mobile 实现点击弹form弹窗

最新推荐文章于 2025-11-18 03:34:24 发布

原创最新推荐文章于 2025-11-18 03:34:24 发布 · 1.1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文描述了如何在前端应用中使用React的Form和Card组件，配合Modal弹窗，实现实时输入新房号并进行表单验证，点击‘确定’按钮获取输入值。

目标效果：

代码实现部分：

<div
  onClick={async ()=>{
    Modal.show({
      content: (
        <Card>
          <Form form={form} layout='horizontal'>
            <Form.Item name='room_no' rules={[{ required: true, message: '不能为空'}]}>
              <Input placeholder='请输入新房号' clearable />
            </Form.Item>
          </Form>
        </Card>
      ),
      closeOnAction: true,
      showCloseButton:true,
      actions: [
        {
          key: 'confirm',
          text: '确定',
          primary:true,
          onClick:async ()=>{
            const params = form?.getFieldsValue()
            console.log("paramsaaaaa",params);
        }}
      ]
    })
  }}
>
  <SearchBar placeholder='搜索' />
</div>