[英]React component not passing value to correct component
我有一個簡單的 React 應用程序,它使用 react-dnd 構建可拖動方塊的網格,這些方塊具有初始顏色和文本值以及兩個組件來更改顏色和更改文本。 顏色變化(通過 ColorPicker2,使用 react-color 庫)工作正常。 文本更改(使用來自@carbon/react 的 TextI ...
[英]React component not passing value to correct component
我有一個簡單的 React 應用程序,它使用 react-dnd 構建可拖動方塊的網格,這些方塊具有初始顏色和文本值以及兩個組件來更改顏色和更改文本。 顏色變化(通過 ColorPicker2,使用 react-color 庫)工作正常。 文本更改(使用來自@carbon/react 的 TextI ...
[英]How to remove opacity in element from react dnd?
當我從 react-dnd 中拖動一個項目時,我拖動的元素幾乎 100% 不透明,我想讓他更明顯,我該怎么做? 在下面的這張圖片中,我有上面的元素(我正在拖動的那個)和處於“運動”狀態的底部,他幾乎隨着不透明度消失了: 這是創建卡片的 div,我用 tailwind 制作: ...
[英]React dnd error 'Jest encountered an unexpected token' while running jest
以下是版本說明。 反應:18.1.0 反應-dnd:16.0.1 我遇到錯誤。 // jest.preset process.env.TZ = 'UTC' const nxPreset = require('@nrwl/jest/preset') module.exports = {...n ...
[英]React dnd is not working in latest version of chrome
我們有一個應用程序,它正在使用反應拖放。 基本上我們有 .network 文件,我們想將其拖放到列表中。我們正在使用庫中的 useDrag 方法[版本 react-dnd:11.1.3]。 它在早於 107.0.5304.88 的 Chrome 版本中運行良好。但它目前因 Aw,Snap:錯誤代碼而 ...
[英]React dnd drag item different from actual item
我嘗試將列表中的項目 dnd 到存儲桶中。 這些項目有id, title, description 問題: 拖動標記為value: 1, title: foo, description: bar的項目時,會隨機選擇列表中的另一個項目。 ...
[英]React DnD sort nested list
我正在嘗試為我的應用程序創建嵌套的拖放 UI 體驗,但如果沒有很多錯誤,我就無法讓它工作。 在拖動時,它調用 function onHover並且我試圖找出將拖動元素移動到的位置,但目前,它有問題並且無法正常工作。 首先,我從 state 中移除拖動的元素,然后嘗試將其放置在正確的位置,同時拖動它。 ...
[英]Passing an Array from one UseState to Another
我目前正在嘗試弄清楚如何通過兩個不同的組件將數組從一個 useState object 傳遞到另一個。 在我的第一個 useState 中,我有一個名為imagesOriginal的數組,其中動態填充了各種不同圖像的文件路徑,如下所示: 在我的App.js中,我像這樣構造它。import React ...
[英]Calling a functional forwardRef component React
我正在構建一個組件,它調用一個通過道具傳遞的組件。 該組件在其中使用前向引用,因此我無法調用它。 它顯示itemComponent 。 代碼: 父組件: itemComponent示例: 第一個組件中使用的組件: ...
[英]React-dnd useDrop in both child and parent components
紅色框是父放置目標,綠色框是子放置目標。 父放置目標用於將子放置到單元格中。 子放置目標用於對它們進行排序。 父組件useDrop 子組件 useDrop 和 useDrag 因此,當我將藍色事件拖放到黃色事件時,在 monitor.getDropResult 中,我從父組件獲得結果,但我需要子 ...
[英]With react DnD, why my state resets when every time I drop an element?
我正在開發表單生成器。 基本實現是有效的,但是每次當我將元素從工具箱移動到表單時,當前狀態都會重置為初始狀態,然后添加新放置的元素,因此以前拖動的元素會從表單中丟失。 下面是沙箱源代碼的鏈接。 https://codesandbox.io/s/nifty-https-qx8lko index ...
[英]React MUI TreeView / React DnD: How to use a draggable component?
在我的 React Web 應用程序中,我想 將項目從左側的MUI TreeView拖動到右側的放置目標之一 在放置目標之間拖放項目 用戶界面樣機: 第二部分已經起作用了。 至於第一部分,我確實設法使它們可拖動(遵循React DnD 基本示例),我可以將它們從樹視圖拖到放置目標中: ...
[英]RC-dock library's 'DockLayout' cannot be used as a JSX component. Its instance type 'DockLayout' is not a valid JSX element
我看到很多類似的問題,但沒有一個答案能解決我的代碼中的問題。 我使用 React 17、Mui v5、TS v4。 我嘗試從https://www.npmjs.com/package/rc-dock實現一個簡單的組件。 我只是從代碼沙箱( Dock.js )上的可用示例中復制並粘貼了一個代碼: ht ...
[英]Do I have a stale closure in my React app using react-dnd for drag and drop?
我正在構建一個拖放應用程序,它允許用戶構建一個他們拖到列表中的項目樹。 將項目拖到列表上時,有兩種可能的操作: 該項目被拖放到列表中並添加 該項目被拖放到現有項目上並作為該項目的子項添加 添加子項時存在錯誤。 我在這里重現了 CodeSandbox 中的錯誤: https ://code ...
[英]React DnD / TypeScript: How to use getDropResult?
在我的 React web 應用程序中,我有許多react-dnd放置目標: const DropTarget = () => { const [{ canDrop, isOver }, drop] = useDrop(() => ({ accept: 'MyDnDItemT ...
[英]Is it possible to implement drag-select with React-dnd?
https://github.com/JeremyDurnell/react-drag-select 我查看了這個存儲庫,但是當我運行演示時,我注意到它只是呈現選擇矩形,而不允許我在矩形內使用 select 元素。 問題是,有沒有辦法讓用戶在 React-DnD 中通過拖動選擇 select 多 ...
[英]Why is my React DND implementation not working in Next JS?
我有這個 React DND 實現。 有多個放置目標。 我能夠拖動元素,但它沒有被目標接收到。 我嘗試在 useDrop 的 drop function 中執行 console.log。 控制台上沒有任何日志記錄。 可能是什么問題? 免打擾提供商實施 使用 useDrag 鈎子的可拖動組件 放置目 ...
[英]How to keep the items inside the container while drag and drop with react-dnd
我正在 TypeScript 中構建一個基本的 React 應用程序來呈現和管理網格布局系統,該系統包含一個 12 列網格,其中可以將模塊(可拖動項目)放置在網格中。 這些模塊目前可以通過拖放自由移動。 目標是擴展算法,以便模塊可以在布局容器內移動。 該模塊不能移動到布局容器的頂部、右側和左側邊緣之 ...
[英]How to implement an intelligent drag drop (like this) in react? Canvas or non-canvas based approach?
什么方法可以做這樣的智能拖放反應? (基於畫布或非畫布的方法?)。 那就是在不使用 cavas 的情況下使用 React(帶有諸如 React DND 之類的庫),或者使用 HTML 5“canvas”(可能帶有諸如“react-konva”之類的庫)在 React 中渲染/繪制它。 要求: ...
[英]Issues loading css files sass-loader
使用下面的 package.json 創建了一個新的反應項目: 每當我運行 npm start 時,都會出現以下錯誤: 有沒有人對如何修復有任何想法,我一直在嘗試使用文檔來啟動這個項目,但一直遇到這個問題 ...
[英]Beautiful Dnd is not working with react@18
我正在嘗試在我的項目中包含漂亮的 dnd package,但在安裝 package 時出現錯誤。 請告訴我是否有其他類似的 package 或此錯誤的解決方案。 ...