如何将从ANT Design ReaCJS选择的过滤器发送到Nodejs Backend？

Question

如何将选择从Ant Design Reacjs选择的过滤器参数发送到Nodejs Backend？ 我想应用过滤。因此，为此，我制作后端API，当我从 Postman 发送数据时，它可以正常工作。现在，我希望应该从fron-end（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发送的帖子请求

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

Answer 1

在Treedata中，在每个子节点/对象中添加父和值密钥：

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;
        });
    };

这里每个节点都有其父键。在INFO中，我们具有checkednodes，其中包含所有标记的节点。我只是在它们上映射并从每个节点获取值，然后将数组分配给该节点的父。