如何解决第二次点击后 Modal 没有显示在我的 react boostrap 表中
我使用 react boostrap 表,但在我单击一次后,第二次单击我的表时,模态没有显示。
这是我的表格组件
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>
);
};
这是调用模态和表格以及'''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;
这是模态组件:
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;
谁能帮助我,如何修复表格,以便每次点击表格时都会显示模态。
解决方法
我认为问题在于父级和子级的模态状态变得不同步。
特别是在子组件中,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]);
// ...
};
当 shouldShow
(父)组件中的 MexiMap
状态更新时,这会正确反映在模态行为中,因为第一次单击会打开模态。关闭模态时调用 handleClose
,它将 show
设置为 false
。
问题在于这个状态对于 CustomModal
来说是局部的。父组件不知道模态状态已更改,因为 show
已更改而不是 shouldShow
。 show
和 shouldShow
表示相同的信息,因此这些状态不应具有不同的值。
您可以做的是将父组件的 setShouldShow
传递给 CustomModal(子)组件并使用此函数更新 showModal
状态。
以下是该方法的简化示例:
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>
);
}
这样我们就有了单一的事实来源,shouldShow
状态告诉我们是否应该显示模态。
这是一个 sandbox,其中包含上述实现和重现问题的原始代码的简化版本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。