遇到的问题:

分页如何查询
级联使用
表单回显

解决办法

分页查询

1. 正常查询

输入值调接口查询,我们需要一个存储查询数据的地方

  const [query, setQuery] = useState<QueryObj>({
    page: 1,
    len: 10,
    queryData: {},
  });

和一个保存查询的返回数据的地方

  const [resMap, setResMap] = useState<Res>();

还需要在数据变动时,调接口进行查询

  useEffect(() => {
    getIndustryMapList(query).then(res => {
      if (res.isSuccess) {
        setResMap(res);
      } else {
        message.error(res.msg);
      }
    });
  }, [query]);

此时,数据查询和查询的数据保存已经完成,将查询到的数据拿到antd组件展示

      <Table
        key="mapList"
        dataSource={resMap?.data}
        columns={columns}
        pagination={{
          total: resMap?.total,
          current: query.page,
          pageSize: query.len,
          onChange: value => {
            setQuery(prev => {
              return {
                ...prev,
                page: value,
              };
            });
          },
        }}
      />

还有表单查询的部分,使用antd的Form

      <Form
        form={form}
        name="queryData"
        autoComplete="off"
        layout="vertical"
        onFinish={onFinish}
      >
        <Row justify="space-around">
          <Col span={8}>
            <Form.Item name="name" label="图谱名称">
              <Input />
            </Form.Item> 
          <Col span={8}>
            <Form.Item name="industry" label="所属产业">
              <Cascader
                changeOnSelect
                options={industryJson}
                allowClear
                placeholder="请选择"
                fieldNames={{
                  label: 'value',
                  value: 'value',
                  children: 'items',
                }}
                onChange={value => {
                  setPartQueryData({
                    ...partQueryData,
                    industry: value.toString(),
                  });
                }}
              />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item>
          <div className="search-btns">
            <Button type="primary" htmlType="submit">
              查询
            </Button>
      </Form>

button类型为submit类型,提交表单且数据验证成功后回调事件onFinish,function(valus),values为表单值,onFinishFailed是提交表单数据验证失败的回调事件,可以在此时回调时候进行提交查询数据,重置表单调用Form的resetFields即可

2. 级联使用

antd官网已经有详细用法,options是选项的数据源,可以在第一次进入时请求加载,返回数据用数组型,antd组件用的字段是label和value,可用fieldnames进行重命名为查询得来的数据字段,以满足自己的需要

fieldNames={{
                label: 'value',
                value: 'value',
                children: 'items',
              }}

表单提交时级联选择框传出为以逗号间隔的string,改为#号,可以用replace进行替换,写法

replaceAll(",","#")
或者
replace(/,/g,'#')

3. 表单回显

可以用Form.setFieldsValue()赋值,在调用接口返回数据后,如果格式一样可以直接塞入,如果格式不是需要的类型,可以一个一个塞值

      form.setFieldsValue(formInitialValues);

        form.setFieldsValue({
                  labelValue: record.labelValue,
                  labelColor: record.labelColor,
                });

前端问题----React表单及级联选择