如何将从 Ant design Reacjs 中选择的过滤器参数发送到 nodejs 后端？

Question

如何将从 Ant design Reacjs 中选择的过滤器参数发送到 nodejs 后端？ 我想应用过滤。因此，为此我制作了后端 API，当我从 Postman 发送数据时，它可以正常工作。现在我希望 Filters 数据参数应该从前端（reactjs）发送。我如何使用 Ant design Tree 组件从前端发送它？这是我的代码：

 // popup
  const [isModalVisible, setIsModalVisible] = useState(false);
  // dropdown tree states
  const [expandedKeys, setExpandedKeys] = useState([]);
  const [checkedKeys, setCheckedKeys] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState([]);
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [information, setInformation] = useState([])

  //   handle tree's categories functions
  const onExpand = (expandedKeys, info) => {
    console.log("onExpand info", info)
    console.log("onExpand", expandedKeys); // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.

    setExpandedKeys(expandedKeys);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeys, info) => {
    // console.log("onCheck", checkedKeys)
    console.log("onCheck info", info.node)
    setCheckedKeys(checkedKeys);
    setInformation((prevSelected)=>[...prevSelected, info.node])
  };

  const onSelect = (selectedKeys, info) => {
    console.log("onSelect selectedKeys",selectedKeys)
    console.log("onSelect info", info);
    setSelectedKeys(selectedKeys);
  };
  // popup functions
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const handleApplyFilter = ()=>{
    console.log("Apply button ", information);
  }
  
  
 const treeData = [
    {
      title: "Shelf Life",
      key: "0",
      checkable: false,
      children: [
        {
          title: "10",
          key: "0-1",
          checkable: true,
        },
        {
          title: "20",
          key: "0-2",
          checkable: true,
        }
      ],
    }
  ];
  
  
  return(
  <div>
  <div>
              <Button
                type="default"
                size="large"
                onClick={showModal}
                className="filteration"
              >
                <FilterOutlined /> Filters
              </Button>
              
              
              <Modal
              title="Filters"
              visible={isModalVisible}
              onOk={handleOk}
              onCancel={handleCancel}
              footer={[
                <Button key="1" onClick={()=>setCheckedKeys([])}>Reset</Button>,
                <Button key="2" type="primary" onClick={handleApplyFilter}>
                  Apply
                </Button>,
              ]}
            >
              <Tree
                checkable
                onExpand={onExpand}
                expandedKeys={expandedKeys}
                autoExpandParent={autoExpandParent}
                onCheck={onCheck}
                checkedKeys={checkedKeys}
                onSelect={onSelect}
                selectedKeys={selectedKeys}
                treeData={treeData}
              />
            </Modal>
            </div>
  </div>
  )

这是我从 Postman 发送的 post 请求

现在我希望当我单击“应用”按钮时向后端发出 post 请求。 Post 请求数据将类似于我从 Postman 发送的数据。请帮助我！提前致谢

Answer 1

在 treeData 中，在每个子节点中添加父键和值键 node/object:

const treeData = [
        {
            title: 'Shelf Life',
            key: '0',
            parent: 'shelfLife',
            checkable: false,
            children: [
                {
                    title: '10',
                    key: '0-1',
                    value: 10,
                    parent: 'shelfLife',
                    checkable: true
                },
                {
                    title: '20',
                    key: '0-2',
                    value: 20,
                    parent: 'shelfLife',
                    checkable: true
                }
            ]
        },
        {
            title: 'Trade Name',
            key: '1',
            checkable: false,
            children: [
                {
                    title: 'Head & Shoulder',
                    value: 'Head & Shoulder',
                    parent: 'tradeName',
                    key: '1-1'
                }
            ]
        }
    ];

现在创建一个新状态：

const [filter, setFilter] = useState<any>({});

当你选中任何复选框时，它会调用 onCheck 函数。

    const onCheck = (checkedKeys, info) => {
        setCheckedKeys(checkedKeys);

        let parent = info.node.parent;

        setFilter((prev) => {
            let keys = { ...prev };
            keys[parent] = info.checkedNodes.filter((item) => item.parent === parent).map((item) => item.value);
            return keys;
        });
    };

这里每个节点都有它的父键。在信息中，我们有 checkedNodes，其中包含所有标记为选中的节点。我只是映射它们并从每个节点获取值并将数组分配给该节点的父节点。

如何将从 Ant design Reacjs 中选择的过滤器参数发送到 nodejs 后端？

How can I send filters parameters selected from Ant design Reacjs to nodejs backend?

rest

integration

reactjs

antd