frontend 相关问题

我创建一个表格来显示一些值 {列表版本？ listVersions.map(( 我创建一个表格来显示一些值 <TableContainer> <Table sx={{ width: "100%" }}> {listVersions ? listVersions.map((current_version, index) => { const isItemSelected = isSelected(index+ 1); const labelId = `enhanced-table-checkbox-${index}`; return ( <TableRow hover onClick={() => handleClick(index + 1, current_version, isItemSelected)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={index + 1} selected={isItemSelected} sx={{ cursor: "pointer" }} > <TableCell padding="checkbox"> <Checkbox color="primary" checked={isItemSelected} inputProps={{ "aria-labelledby": labelId, }} /> </TableCell> <TableCell>{current_version}</TableCell> </TableRow> 我需要选择当前版本。所以handleClick看起来像： const handleClick = (id: number, version: string, isSelected: boolean) => { console.log(version , isSelected); ...... } 正确的版本显示在控制台中，但其状态，无论是否选中，始终是相反的值。当我选择行时，值为 false，当我取消选择行时，值为 true。选择行时预期值为 true。我不明白哪里出了问题 handleClick函数，isSelected似乎是负责判断该行是否被选中的函数。您可以直接将选定的状态传递给 handleClick 函数，而不是依赖于 isSelected 函数。 <TableRow hover onClick={() => handleClick(index + 1, current_version, isItemSelected)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} key={index + 1} selected={isItemSelected} sx={{ cursor: "pointer" }} > 修改您的 handleClick 函数以直接使用从 TableRow 组件传递的 isItemSelected 值 const handleClick = (id: number, version: string, isItemSelected: boolean) => { console.log(version, isItemSelected); // Other logic };

javascript reactjs material-ui frontend

回答 1 投票 0

如何在MUI-X DataGrid中实现静态行号？

我需要渲染表格中每一行的编号。它应该是静态的，并且在对表中的列进行排序或过滤时不应更改。我尝试使用 getRowIndexRelativeToVisibleRows m...

javascript reactjs frontend mui-x-data-grid

回答 1 投票 0

Angular 17 主体行为

在 Angular 17 中，我在登录服务中设置了一个可观察对象。但是，当尝试在 app.component.ts 中使用此可观察量时，它最初不会被调用。重新加载页面后

angular frontend angular-ui-router developer-tools

回答 1 投票 0

vue中element-plus使用中ElButton和el-button有什么不同

element-plus官方文档中，组件的导入方式是：ElButton，使用方式是：el-button。在我的实践中，是这样使用element-plus的：ElButton也能正常工作。我徘徊...

html vue.js web frontend element-plus

回答 1 投票 0

使用自定义 Bootstrap Angular

我有一个关于 Angular 的问题无法解决。我使用 Mustache 和 Bootstrap 创建了一个 Spring Web。现在我想用Angular来做前端，但我无法实现它。这是

angular spring bootstrap-4 frontend back

回答 1 投票 0

如何使用外部方法向 JTable 添加行

我正在为数字走廊设置模式，以便管理员可以访问学生姓名和学生 ID。我的代码应该有一个包含学生姓名和 ID 的 JTable，当您按“添加行”但是...

java swing frontend jtable

回答 1 投票 0

无法更新useEffect()中的useState()常量

`const [详细信息，setDetails] = useState({ “id”：0， “创建”：“”， “标题”： ””， "general_category": "", “特定类别&...

javascript reactjs react-hooks axios frontend

回答 1 投票 0

Angular 生命周期钩子？

只是想知道如果我没有显式实现任何生命周期钩子，Angular 框架会隐式调用它吗？例如：如果我没有在组件中使用@input，ngOnChanges将被触发

javascript angular typescript frontend angular-lifecycle-hooks

回答 1 投票 0

使用javascript将上传的文件分割成多个块

我正在寻找一种方法来在浏览器前端拆分任何文本/数据文件，然后再将其作为多个文件上传。我的限制是每次上传 40KB。因此，如果用户上传 400KB 的文件，则会

javascript google-chrome base64 compression frontend

回答 2 投票 0

无法移动到图像的左侧或顶部

我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况 !DOCTYPE html> 我对 css、html 还很陌生。目前我遇到了一个问题，放大时无法到达顶部或左侧，缩小时看起来从未发生过这种情况 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Viewer</title> <style> body, html { margin: 0; padding: 0; height: 100%; } #container { display: flex; height: 100%; overflow: hidden; /* Agregado para ocultar el desbordamiento de los botones */ } #svg-container { flex: 1; overflow: auto; padding: 10px; } svg { max-width: 100%; max-height: 100%; display: block; } .zoom-btn { padding: 10px; background-color: #f0f0f0; border: 1px solid #ccc; cursor: pointer; z-index: 1; /* Asegura que los botones estén por encima del SVG */ } </style> </head> <body> <div id="container"> <div id="svg-container"> <svg id="my-svg" version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1049 744" preserveAspectRatio="xMidYMid meet"> <g transform="translate(0,744) scale(0.1,-0.1)" fill="#000000" stroke="none"> <path d="M8699 7344 c-10 -11 -42 -61 -73 -112 -613 -1016 -1784 -2032 -3386 -2939 -269 -152 -537 -294 -650 -343 -352 -155 -1199 -468 -2245 -832 -443 -154 -920 -317 -947 -323 -14 -4 -33 -14 -41 -23 -14 -15 -1280 -2382 -1293 -2417 -3 -8 5 -25 18 -38 23 -23 29 -24 194 -26 170 -1 1458 -25 1954 -36 146 -3 732 -15 1303 -25 2689 -51 3130 -60 3382 -65 149 -3 614 -12 1035 -20 913 -17 1199 -23 1800 -35 250 -6 503 -10 562 -10 105 0 108 1 125 26 19 29 46 -199 -272 2284 -30 239 -125 982 -211 1650 -85 668 -164 1278 -174 1355 l-18 140 143 795 c79 437 149 824 155 859 11 59 10 65 -10 86 -25 27 -73 31 -455 40 -126 3 -288 7 -360 10 -503 18 -519 18 -536 -1z m696 -110 c303 -9 552 -18 554 -20 1 -1 -61 -355 -139 -786 -79 -431 -145 -810 -147 -843 -3 -38 16 -217 51 -490 52 -406 113 -878 226 -1765 27 -212 81 -635 120 -940 39 -305 118 -919 175 -1365 57 -445 101 -812 99 -814 -4 -4 -1699 24 -2044 34 -91 3 -304 7 -475 10 -414 7 -1257 23 -1585 30 -146 3 -618 12 -1050 20 -741 14 -954 18 -1555 31 -137 2 -961 18 -1830 35 -868 16 -1581 32 -1583 34 -2 2 5 19 16 37 11 18 277 517 592 1108 315 591 583 1091 595 1111 13 20 35 39 49 43 123 31 1895 655 2451 864 559 209 756 294 1053 453 1750 938 3074 2047 3732 3127 l63 102 41 0 c22 0 289 -7 591 -16z"/> <path id="destino" d="M9470 7005 l0 -165 150 0 150 0 0 165 0 165 -150 0 -150 0 0 -165z m250 0 l0 -115 -100 0 -100 0 0 115 0 115 100 0 100 0 0 -115z"/> <g id="punto-destino"> <circle cx="9470" cy="7005" r="100" fill="red" /> </g> <path id="camino_abajo" d="M9305 6478 c-3 -7 -25 -1225 -50 -2707 -24 -1482 -46 -2696 -48 -2698 -2 -2 -1731 31 -3841 72 -2111 41 -3842 73 -3847 70 -12 -8 -12 -32 0 -39 5 -3 1736 -40 3846 -81 2111 -41 3848 -78 3860 -81 13 -3 25 -1 29 4 8 13 98 5451 91 5463 -9 13 -35 11 -40 -3z"/> <path id="camino_arriba" d="M8845 6458 c-3 -7 -43 -1088 -90 -2402 -46 -1313 -86 -2390 -88 -2392 -1 -2 -1594 28 -3538 66 -1943 38 -3544 70 -3557 70 -24 0 -41 -25 -26 -40 11 -11 7160 -154 7176 -144 5 3 7 16 4 27 -3 11 33 1097 80 2411 46 1315 82 2397 79 2404 -2 6 -11 12 -20 12 -9 0 -18 -6 -20 -12z"/> <path id="entrada" d="M710 870 l0 -120 310 0 310 0 0 120 0 120 -310 0 -310 0 0 -120z m570 0 l0 -70 -260 0 -260 0 0 70 0 70 260 0 260 0 0 -70z"/> <g id="punto-entrada"> <circle cx="710" cy="870" r="100" fill="red" /> </g> <polyline id="ruta" fill="none" stroke="red" stroke-width="2"/> </g> </svg> </div> <div id="nav"> <button class="zoom-btn" id="zoom-in">+</button> <button class="zoom-btn" id="zoom-out">-</button> </div> </div> <script> var zoomInBtn = document.getElementById('zoom-in'); var zoomOutBtn = document.getElementById('zoom-out'); var puntoEntrada = document.getElementById('punto-entrada'); var puntoDestino = document.getElementById('punto-destino'); var ruta = document.getElementById('ruta'); var svg = document.getElementById('my-svg'); var scale = 1; zoomInBtn.addEventListener('click', function() { scale *= 1.2; updateView(); }); zoomOutBtn.addEventListener('click', function() { scale *= 0.8; updateView(); }); function updateView() { svg.style.transform = 'scale(' + scale + ')'; } // Calcular la ruta desde la entrada hasta el destino function calcularRuta() { debugger; // Obtener coordenadas de los puntos de entrada y destino var entradaX = puntoEntrada.getAttributeNS(null, 'cx'); var entradaY = puntoEntrada.getAttribute('cy'); var destinoX = puntoDestino.getAttribute('cx'); var destinoY = puntoDestino.getAttribute('cy'); // Establecer las coordenadas de los puntos de la ruta ruta.setAttribute('x1', entradaX); ruta.setAttribute('y1', entradaY); ruta.setAttribute('x2', destinoX); ruta.setAttribute('y2', destinoY); } // Calcular la ruta al cargar la página window.onload = function() { calcularRuta(); }; </script> </body> </html> 我已经尝试编辑一些属性，但不起作用。我不太确定为什么会发生这种情况，并且非常感谢任何帮助。抱歉英语不好。为了解决这个问题，您需要在放大或缩小时动态调整 SVG 内容在其容器内的缩放和位置。目前，您仅对 SVG 元素本身应用缩放变换，但您还需要调整容器的滚动位置以保持缩放内容可见。以下是如何更改 updateView() 函数来实现此目的： function updateView() { svg.style.transform = 'scale(' + scale + ')'; // Adjust container scroll position var rect = svg.getBoundingClientRect(); var scrollLeft = (rect.width * scale - rect.width) / 2; var scrollTop = (rect.height * scale - rect.height) / 2; svg.parentElement.scrollLeft = scrollLeft; svg.parentElement.scrollTop = scrollTop; } 此代码计算容器需要水平和垂直滚动的量，以保持缩放的内容居中且可见，然后相应地调整容器的scrollLeft和scrollTop。

javascript html css frontend web-frontend

回答 1 投票 0

frontend 相关问题

最新问题