英文:
my modal has a black background when i open it
问题
I found the problem and it is because when I click to open the modal it opens multiple times. If I have 10 rows, the modal opens 10 times.
我找到了问题所在,因为当我点击打开模态框时,它会多次打开。如果我有10行数据,模态框会打开10次。
In your code, it seems that the issue is related to how the modal is being opened. The modal is being opened multiple times because you are not handling its state properly. You should make sure that the modal is only opened once when you click on a row.
在你的代码中,问题似乎与模态框如何打开有关。模态框被多次打开是因为你没有正确处理它的状态。你应该确保在单击行时只打开一次模态框。
Here's a possible solution:
以下是可能的解决方案:
-
Modify
useTableHook.js
:In the
useTableHook.js
file, it seems that you're rendering aDeleteModal
component inside theCell
component. This can cause multiple modals to be created. Instead, you should track the selected row and manage the modal's state outside of this file.在
useTableHook.js
文件中,似乎你在Cell
组件内部渲染了一个DeleteModal
组件。这可能会导致创建多个模态框。相反,你应该在该文件之外跟踪所选行并管理模态框的状态。 -
Update
tableView.jsx
:In your
tableView.jsx
file, it's essential to manage the modal's state and pass it as a prop to theDeleteModal
component. Ensure that theshowSelectedRow
function is only responsible for selecting the row and not opening the modal.在你的
tableView.jsx
文件中,重要的是要管理模态框的状态并将其作为属性传递给DeleteModal
组件。确保showSelectedRow
函数仅负责选择行而不负责打开模态框。 -
Modify
DeleteModal
component:In your
DeleteModal
component, make sure it receives theshow
prop and opens or closes the modal accordingly. The modal should only open whenshow
istrue
.在你的
DeleteModal
组件中,确保它接收show
属性并相应地打开或关闭模态框。模态框应该仅在show
为true
时打开。
By implementing these changes, you should be able to prevent the modal from opening multiple times when clicking on rows.
英文:
I'm doing a table with delete and edit option and when I open a modal my modal has a black background. I found the problem and it is because when I click to open the modal it open multiple times. If I have 10 rows the modal open 10 times.
I'm using React-table-v7 and redux for my modal states.
useTableHook.js
const resourcesColumns = useMemo(() => [
{
Header: 'delete',
accessor: () => 'delete',
disableSortBy: true,
Cell: ({row}) => <div onClick={(event) => event.stopPropagation()}>
<DeleteModal />
</div>
}
], [resourceData]);
useEffect(() => {
hideColumns();
setResourceData(data);
}, [data]);
My tableView.jsx
<tbody {...getTableBodyProps()} >
{loading
? <tr className="text-center">
<td colSpan="5">
<LoadingComponent />
</td>
</tr>
: page.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()} className="tb-row" onClick={() => showSelectedRow(row)} key={row}>
{row.cells.map((cell, index) => <td
{...cell.getCellProps()}
key={index}
className={`${index === 0 ? 'tb-body-txt-left py-2 px-2' : 'tb-body-txt'}`}
>
{cell.render('Cell')}
</td>
)}
</tr>
);
})
}
</tbody>
i'm using a hook for select the state
const modalState = () => {
const ModalState = useSelector((state) => state.modal.isOpen);
return ModalState;
};
my slice for modals
const modalSlice = createSlice({
name: 'modal',
initialState: {isOpen: false},
reducers: {
openModal: (state, action) => {
state.isOpen = true;
},
closeModal: (state, action) => {
state.isOpen = false;
}
}
});
export const {reducer} = modalSlice;
export default modalSlice.actions;
my modal view
<>
<i className="fa fa-trash-can text-primary ZoomIcon" onClick={handlers.opened} />
<Modal show={show} onHide={handlers.closed} className="modalPosition">
<Modal.Header closeButton>
<Modal.Title>Atención !!</Modal.Title>
</Modal.Header>
<Modal.Body>Confirme que desea eliminar el recurso </Modal.Body>
<Modal.Footer className="modalFooter">
<Button variant="light" onClick={handlers.closed} autoFocus={true}>Close</Button>
<Button variant="primary" onClick={handlers.closed} autoFocus={true}>
<i className="fa fa-check" aria-hidden="true"></i>Confirmar</Button>
</Modal.Footer>
</Modal>
</>
here i pass my hook for the show property
const modalState = useDeletehook();
<DeleteModal show={modalState}/>
Do you know how can I fix this problem?
答案1
得分: 2
问题
主要问题是您只有一个modal.isOpen
状态,但有多个模态框。
const modalSlice = createSlice({
name: 'modal',
initialState: { isOpen: true },
reducers: {
openModal: (state, action) => {
state.isOpen = true;
},
closeModal: (state, action) => {
state.isOpen = false;
}
}
});
当state.modal.isOpen
为true时,所有模态框都会打开。
解决方案
您希望设置一些isOpen
状态来指示应显示特定模态框。您可以通过使用与行数据相关的某个id
值来实现这一点。
const modalSlice = createSlice({
name: 'modal',
initialState: {
isOpen: null
},
reducers: {
openModal: (state, action) => {
state.isOpen = action.payload;
},
closeModal: (state, action) => {
state.isOpen = null;
}
}
});
要打开特定的模态框,请调度openModal
操作并传递要打开的特定模态框的id。
dispatch(modalSlice.openModal(rowEl.id));
dispatch(modalSlice.closeModal());
<DeleteModal show={modalState.isOpen === rowEl.id}/>
英文:
Issue
The main issue is that you've only a single modal.isOpen
state and multiple modals.
const modalSlice = createSlice({
name: 'modal',
initialState: { isOpen: true },
reducers: {
openModal: (state, action) => {
state.isOpen = true;
},
closeModal: (state, action) => {
state.isOpen = false;
}
}
});
When state.modal.isOpen
is true then all modals are opened.
Solution
You want to set some isOpen
state to indicate that a specific modal should be shown. You can do this by using some id
value that is related to the row data.
const modalSlice = createSlice({
name: 'modal',
initialState: {
isOpen: null
},
reducers: {
openModal: (state, action) => {
state.isOpen = action.payload;
},
closeModal: (state, action) => {
state.isOpen = null;
}
}
});
To open a specific modal dispatch the openModal
action and pass the id of a specific modal you want opened.
dispatch(modalSlice.openModal(rowEl.id));
dispatch(modalSlice.closeModal());
<DeleteModal show={modalState.isOpen === rowEl.id}/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论