如何將從AntdesignReacjs中選擇的過濾器引數發送到nodejs后端？

如何將從 Ant design Reacjs 中選擇的過濾器引數發送到 nodejs 后端？ 我想應用過濾。因此，為此目的，我制作了在從Postman發送資料時可以正常作業的后端 API 。現在我希望過濾器資料引數應該從前端（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 請求資料將類似于我從 Postman 發送的資料。請幫幫我！提前致謝

uj5u.com熱心網友回復：

在 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所有標記為選中的節點。我只是映射它們并從每個節點獲取值并將陣列分配給該節點的父節點。

標籤：反应 休息 一体化 蚂蚁

上一篇：OAuth2.0是否適合我的用例？

下一篇：設計APIOpenAPI3.0-標頭引數內容型別被忽略