reactflow js删除网站上不工作的示例
reactflow js删除网站上不工作的示例
提问于 2021-12-27 23:30:12
我正在尝试实现页面底部描述的删除：https://reactflow.dev/docs/getting-started/
但是，backspace键似乎什么也不做。作为新的反应，我不太确定是怎么回事。(另外，这里删除边缘的示例似乎也无法工作https://reactflow.dev/examples/edge-with-button ?)
以下是相关文件。任何帮助都是非常感谢的。
App.js
import logo from './logo.svg';
import React, { useCallback, useState, useRef } from "react";
import ReactFlow, { removeElements, addEdge } from "react-flow-renderer";
import './App.css';
//import _default from 'react-flow-renderer/dist/components/Handle';
const initialElements = [
{
id: '1',
type: 'input', // input node
data: { label: 'Input Node' },
position: { x: 250, y: 25 },
},
// default node
{
id: '2',
// you can also pass a React component as a label
data: { label: <div>Default Node</div> },
position: { x: 100, y: 125 },
},
{
id: '3',
type: 'output', // output node
data: { label: 'Output Node' },
position: { x: 250, y: 250 },
},
// animated edge
{ id: 'e1-2', source: '1', target: '2', animated: true },
{ id: 'e2-3', source: '2', target: '3' },
];
export default function App() {
const [elements, setElements] = useState(initialElements);
const onElementsRemove = (elementsToRemove) => setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
return (
<div className="App">
<div style={{ height: 1024 }}>
<ReactFlow
elements={elements}
onElementsRemove={onElementsRemove}
onConnect={onConnect}
deleteKeyCode={46} /* 'delete'-key */
/>
</div>
</div>
);
};Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ReactFlow from 'react-flow-renderer';
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
//document.getElementById('root')
rootElement
);
reportWebVitals();App.css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}Note 1经过更多的实验，在mac上，它正在点击ctrl +删除键。但是，不确定为什么第二个示例中的delete按钮仍然不能工作。
Note 2经过更多的实验，在添加代码以拖放节点之后，它就变成了fn+delete。好像角色46变了？
回答 1
Stack Overflow用户
发布于 2022-10-01 08:32:43
我想您已经找到了解决方案，但为了防止像我这样的人想要使用"Backspace“以外的键来删除节点或边缘，我编写了我找到的内容：
把“deleteKeyCode=.”作为tag的一个属性，解决了这个问题。
我单击了一个节点或边缘，按下了删除键，看到了该节点或边缘与以下代码一起消失：
const [flowDiagram, setFlowDiagram] = useState([]);
<ReactFlow ...
onInit={r=>{setFlowDiagram(r)}}
deleteKeyCode={["Backspace","Delete"]}
onPaneContextMenu={(e)=>{e.preventDefault();addNode(e)}}
onNodesDelete={(n)=>yourFunction1(n} // as needed
onEdgesDelete={(t)=>yourFunction2(t) // as needed
/>
// In my case, right-click draws a new node on the pane
function addNode(e){
let newId = MAKE_YOUR_OWN;
let newNode = {
id: newId,
type: "default",
data: {label: `[${newId}]`, ADD_IF_NECESSARY},
position:{UP_TO_YOU}
};
flowDiagram.addNodes(newNode);
}顺便说一句，"preventDefault“会抑制你通常在网页中看到的上下文菜单。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70501406
复制相关文章
相似问题
腾讯云开发者
