我的模态框在打开时具有黑色背景。

huangapple go评论65阅读模式
英文:

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:

以下是可能的解决方案:

  1. Modify useTableHook.js:

    In the useTableHook.js file, it seems that you're rendering a DeleteModal component inside the Cell 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组件。这可能会导致创建多个模态框。相反,你应该在该文件之外跟踪所选行并管理模态框的状态。

  2. Update tableView.jsx:

    In your tableView.jsx file, it's essential to manage the modal's state and pass it as a prop to the DeleteModal component. Ensure that the showSelectedRow function is only responsible for selecting the row and not opening the modal.

    在你的tableView.jsx文件中,重要的是要管理模态框的状态并将其作为属性传递给DeleteModal组件。确保showSelectedRow函数仅负责选择行而不负责打开模态框。

  3. Modify DeleteModal component:

    In your DeleteModal component, make sure it receives the show prop and opens or closes the modal accordingly. The modal should only open when show is true.

    在你的DeleteModal组件中,确保它接收show属性并相应地打开或关闭模态框。模态框应该仅在showtrue时打开。

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: &#39;modal&#39;,
  initialState: { isOpen: true },
  reducers: {
    openModal: (state, action) =&gt; {
      state.isOpen = true;
    },
    closeModal: (state, action) =&gt; {
      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: &#39;modal&#39;,
  initialState: {
    isOpen: null
  },
  reducers: {
    openModal: (state, action) =&gt; {
      state.isOpen = action.payload;
    },
    closeModal: (state, action) =&gt; {
      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());
&lt;DeleteModal show={modalState.isOpen === rowEl.id}/&gt;

huangapple
  • 本文由 发表于 2023年2月18日 08:35:17
  • 转载请务必保留本文链接:https://go.coder-hub.com/75490400.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定