在 react 中关闭对话框时不突出显示单元格？

Question

我正在构建一个表。当用户单击并拖动单元格时，表格将显示对话框。但当我单击关闭按钮时，单元格仍然会高亮显示。因此，当我单击关闭按钮时，我如何禁用高亮显示。

代码：

export default function Table() {
const [start, setStart] = useState(null);
const [end, setEnd] = useState(0);
const [selecting, setSelecting] = useState(false);
const [isOpen, setIsOpen] = useState(false);
let toggleModal = () => {
setIsOpen(!isOpen);
};
let beginSelection = i => {
setSelecting(true);
setStart(i);
setEnd(i);
updateSelection(i);
};
let endSelection = (i = end) => {
setSelecting(false);
updateSelection(i);
toggleModal();
};
let updateSelection = i => {
if(selecting) {
setEnd(i);
}
};
let cells = [];
for(let j = 0; j < 12*4; j++) {
cells.push(
<Cell key={j}
inputColor={
(end <= j && j <= start || (start <= j && j <= end) ? "#adf": "")
}
onMouseDown={()=>beginSelection(j)}
onMouseUp={()=>endSelection(j)}
onMouseMove={()=> updateSelection(j)}
onClick={toggleModal}
>
{j+1}
</Cell>
)
}
return (
<TableCalendar>
{cells}
<Dialog onClose={()=> toggleModal()} show={isOpen} >
Here's some content for the modal
</Dialog>
</TableCalendar>
)
}

以下是我的完整代码和演示：https://codesandbox.io/s/flamboyant-browser-50h6v请帮帮我。谢谢

Answer 1

嗨，请更换您的Table.js组件，我希望它能有所帮助。

您只需要为模型关闭调用另一个函数。

请看一下感谢

import React, {useState} from "react";
import styled from "styled-components";
import Dialog from "./Modal";

const TableCalendar = styled.div`
display: grid;
grid-template-columns: repeat(12, auto);
background-color: #2196F3;
padding: 10px;
`;
const Cell = styled.div`
background-color: ${props => props.inputColor ||"rgba(255, 255, 255, 1)" };
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
user-select: none;
`;

export default function Table() {
const [start, setStart] = useState(null);
const [end, setEnd] = useState(0);
const [selecting, setSelecting] = useState(false);
const [isOpen, setIsOpen] = useState(false);
let cells = [];
let toggleModal = () => {
setIsOpen(!isOpen);
};
let beginSelection = i => {
setSelecting(true);
setStart(i);
setEnd(i);
updateSelection(i);
};
let closeModal = () =>{
setIsOpen(!isOpen);
setStart(0);
setEnd(0);
updateSelection(0);
}
let endSelection = (i = end) => {
setSelecting(false);
updateSelection(i);
toggleModal();
};
let updateSelection = i => {
if(selecting) {
setEnd(i);
}
};

for(let j = 0; j < 12*4; j++) {
cells.push(
<Cell key={j}
inputColor={
(end <= j && j <= start || (start <= j && j <= end) ? "#adf": "")
}
onMouseDown={()=>beginSelection(j)}
onMouseUp={()=>endSelection(j)}
onMouseMove={()=> updateSelection(j)}
onClick={toggleModal}
>
{j+1}
</Cell>
)
}
return (
<TableCalendar>
{cells}
<Dialog onClose={()=> closeModal()} show={isOpen} >
Here's some content for the modal
</Dialog>
</TableCalendar>
)
}

Answer 2

只需更新以下函数定义即可。

let toggleModal = isClose => {
setIsOpen(!isOpen);
if (isClose) {
setStart(0);
setEnd(0);
}

}；

<Dialog onClose={() => toggleModal(true)} show={isOpen}>
Here's some content for the modal
</Dialog>