英文:
Dynamically change data-prefix of React-Table Header (Only works in Cell)
问题
我正在尝试在按钮点击时动态更改图标的 data-prefix 从 "far" 变为 "fas"。这将把文件夹图标更改为变暗的文件夹图标，以显示正在运行的过程。
当点击按钮时，我运行以下 JavaScript 代码：
document.getElementById("DownloadSelectedFolder").setAttribute("data-prefix", "fas");
这是表格和列：
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
state,
rows,
rowIndex,
prepareRow,
selectedFlatRows,
onChangeSelectedRowsId,
toggleAllRowsSelected,
} = useTable({
columns,
data: Documents,
selectedRows: setSelectedRows,
// Add this
autoResetSelectedRows: false,
autoResetSelectedCell: false,
autoResetSelectedColumn: false,
},
useSortBy,
usePagination,
useRowSelect,
hooks => {
hooks.visibleColumns.push(columns => [
...columns,
{
id: 'selection',
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<button
className="border rounded p-2 mb-2"
onClick={() => mergePDFs(selectedFlatRows.map(row => row.original))}
>
<i id="DownloadSelectedFolder" className="far fa-folder-open action mr-2" disabled></i>
</button>
<Checkbox {...getToggleAllRowsSelectedProps()} />
</div>
),
disableSortBy: true,
Cell: ({ row }) =>
<div>
<Checkbox {...row.getToggleRowSelectedProps()} />
<span onClick={() => openDocument(row.id)}>
<i id={row.id} className="far fa-folder-open action mr-2" disabled></i>
</span>
</div>
}
])
})
如果图标放在单元格（行）中，这段 JavaScript 代码可以正常工作。但如果将图标放在标题（列）中，它将不再起作用...我不确定为什么会这样。有什么建议吗？
英文:
I am trying to dynamically change the data-prefix of an icon from far to fas when a button is clicked. This will change the folder icon into a darken folder icon to show a process is running.
When the button is clicked I run this javascript:
document.getElementById("DownloadSelectedFolder").setAttribute("data-prefix","fas");
Here is the table and column:
const {
getTableProps,
getTableBodyProps,
headerGroups,
page,
nextPage,
previousPage,
canNextPage,
canPreviousPage,
pageOptions,
gotoPage,
pageCount,
setPageSize,
state,
rows,
rowIndex,
prepareRow,
selectedFlatRows,
onChangeSelectedRowsId,
toggleAllRowsSelected,
} = useTable({
columns,
data: Documents,
selectedRows : setSelectedRows,
//Add this
autoResetSelectedRows: false,
autoResetSelectedCell: false,
autoResetSelectedColumn: false,
},
useSortBy,
usePagination,
useRowSelect,
hooks => {
hooks.visibleColumns.push(columns => [
...columns,
{
id: 'selection',
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<button
className="border rounded p-2 mb-2"
onClick={() => mergePDFs(selectedFlatRows.map(row => row.original))}
>
<i id="DownloadSelectedFolder" className="far fa-folder-open action mr-2" disabled></i>
</button>
<Checkbox {...getToggleAllRowsSelectedProps()} />
</div>
),
disableSortBy: true,
Cell: ({ row }) =>
<div>
<Checkbox {...row.getToggleRowSelectedProps()} />
<span onClick={() => openDocument(row.id)}>
<i id={row.id} className="far fa-folder-open action mr-2" disabled></i>
</span>
</div>
}
])
This JavaScript code for the icon does work if I have the icon placed in the cell (rows). When it is placed in the header (column) it no longer works... I am not sure why this is the case. Any advice?
答案1
得分: 1
你可以使用useState创建一个自定义按钮组件，以在图标上添加/移除前缀。
const DownloadButton = ({ onClick }) => {
const [selected, setSelected] = useState(false);
return (
<button
className="border rounded p-2 mb-2"
onClick={onClick}>
<i className={`${selected ? 'fas' : 'far'} fa-folder-open action mr-2`} disabled />
</button>
)
}
<DownloadButton onClick={() => mergePDFs(selectedFlatRows.map(row => row.original))} />
英文:
You could create a custom button component with useState to add/remove the prefix on the icon.
const DownloadButton = ({ onClick }) => {
const [selected, setSelected] = useState(false);
return (
<button
className="border rounded p-2 mb-2"
onClick={onClick}>
<i className={`${selected ? 'fas' : 'far'} fa-folder-open action mr-2`} disabled />
</button>
)
}
<DownloadButton onClick={() => mergePDFs(selectedFlatRows.map(row => row.original))} />
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论