我使用 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;
谁能帮助我,如何修复表格,以便每次单击表格时都会显示模式。