[英]After the second click Modal is not showing in my react boostrap table
Im usign react boostrap tables but after i click it once, the second time i click in my table the modal is not showing.我使用 React boostrap 表,但在我点击一次后,第二次点击我的表时,模式没有显示。
Here is my table component这是我的表格组件
const CustomTable = ({ setStateName, setShouldShow }) => {
const handleTdClick = ( {name} ) => {
setStateName(name);
setShouldShow(true);
};
return (
<Table striped bordered hover variant="dark" size="sm">
<thead>
<tr>
<th>Estado</th>
</tr>
</thead>
<tbody>
<tr>
{ estados.map(e => (
<td key={e.id} onClick={ () => handleTdClick(e)}>
{e.name}
</td>
))}
</tr>
</tbody>
</Table>
);
};
Here is the father component where the modal and the table is called as well as the '''shouldShow``` etc.这是调用模态和表格的父组件以及'''shouldShow```等。
const MexiMap = () => {
const [stateName, setStateName] = useState('');
const [shouldShow, setShouldShow] = useState(false);
const chartEvents = [{
eventName: "ready",
callback: ({ chartWrapper, google }) => {
const chart = chartWrapper.getChart();
google.visualization.events.addListener(chart, "select", e => {
const id = chart.getSelection()[0].row;
const name = getNombreEstadoById(id);
setStateName(name);
setShouldShow(true);
setShouldShow(false);
});
}
}]
const options = {
region: 'MX',
resolution: 'provinces',
colorAxis: { colors: ['#00853f', 'black', '#e31b23'] },
backgroundColor: '#FFFFFF',
datalessRegionColor: '#eeeeee',
defaultColor: 'white',
}
return (
<>
<Chart
width={'1500px'}
height={'900px'}
chartType="GeoChart"
data={data}
options={options}
chartEvents={chartEvents}
/>
<CustomModal name={stateName} showModal={shouldShow} />
<CustomTable setStateName={setStateName} setShouldShow={setShouldShow} />
</>
);
};
export default MexiMap;
And here is the modal component:这是模态组件:
const CustomModal = ({ name, showModal }) => {
const [show, setShow] = useState(showModal);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
showModal && setShow(true);
}, [showModal]);
return (
<>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{name}</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
export default CustomModal;
Can anyone help me, how to fix the table so the modal shows everytime the table is clicked.谁能帮助我,如何修复表格,以便每次单击表格时都会显示模式。
I think the problem is that the modal state in the parent and in the child become out of sync.我认为问题在于父级和子级中的模态 state 变得不同步。
Specifically here in the child, the CustomModal
, component:特别是在子组件
CustomModal
中:
const CustomModal = ({ name, showModal }) => {
const [show, setShow] = useState(showModal);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
useEffect(() => {
console.log(showModal);
showModal && setShow(true);
}, [showModal]);
// ...
};
When the shouldShow
state in the MexiMap
(parent) component is updated, this is correctly reflected in the modal behavior, since the first click opens the modal.当
shouldShow
(父)组件中的MexiMap
更新时,这会正确反映在模态行为中,因为第一次单击会打开模态。 On closing the modal handleClose
is called, which sets show
to false
.在关闭模式
handleClose
关闭被调用,设置show
为false
。
The problem with this is that this state is local to CustomModal
.问题在于这个 state 是
CustomModal
本地的。 The parent component isn't aware that the modal state has changed, because show
has changed and not shouldShow
.父组件不知道模态 state 已更改,因为
show
已更改,而不是shouldShow
。 show
and shouldShow
represent the same information, so these states should not hold different values. show
和shouldShow
表示相同的信息,因此这些状态不应持有不同的值。
What you can do instead is pass your parent components' setShouldShow
to the CustomModal (child) component and use this function to update the showModal
state.您可以做的是将父组件的
setShouldShow
传递给 CustomModal(子)组件并使用此 function 更新showModal
state。
Here's a simplified example of the approach:这是该方法的简化示例:
const CustomModal = ({ name, showModal, setShowModal }) => {
const handleClose = () => setShowModal(false);
const handleShow = () => setShowModal(true);
return (
<>
<Modal show={showModal} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>{name}</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
};
export default function App() {
const [shouldShow, setShouldShow] = useState(false);
return (
<div className="App">
<button onClick={() => setShouldShow(!shouldShow)}>Click</button>
<CustomModal showModal={shouldShow} setShowModal={setShouldShow} />
</div>
);
}
This way we have a single source of truth, the shouldShow
state tells us whether the modal should be shown or not.这样我们就有了单一的事实来源,
shouldShow
state 告诉我们模态是否应该显示。
Here's a sandbox that includes the implementation above and a simplified version of your original code that reproduces the problem.这是一个沙箱,其中包含上述实现和重现问题的原始代码的简化版本。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.