浅浅记录一下我的自学之路（antd5-form）

Ant Design 5.0 之 From

在这里和大家分享一下最新版 antd - from 的基本使用。

这里是使用Form组件（引入就省略了）

    <Form form={form1}>
            <Form.Item initialValue={parentId} name={'id'}>
              <Select style={{ margin: 15, width: '90%' }}>
                <Select.Option value="0">一级分类列表</Select.Option>
                {dataSource.map((c) => (
                  <Select.Option key={c._id} value={c._id}>
                    {c.name}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
            <Form.Item name={'name'} rules={[{ required: 'true', message: '内容不能为空' }]}>
              <Input style={{ margin: 15, width: '90%' }} placeholder="请输入分类名称" />
            </Form.Item>
    </Form>

这里调用了一些内置方法

form2
      .validateFields()
      .then((values) => {
        const categoryName = form2.getFieldValue('categoryName')
        reqUpdateCategory({ categoryId, categoryName })
        setIsModalOpen2(false)
        form2.resetFields()
        getCategory()
        // 验证成功回调
      })
      .catch((errorInfo) => {
        console.log(errorInfo)
        // 验证失败回调
      })
      // 触发表单验证
      
       -------------------分割线-------------------
       form1.resetFields() 
       //重置表单
       form1.getFieldValue('name') 
       // 获取某个值
      

Ant Design 写的太棒啦，都不用自己写处理函数了~