Maison > Questions et réponses > le corps du texte
J'essaie de créer un modal avec un compteur +/-.
Cependant, je pense que puisque l'état est dans le composant sous-jacent, le modal ne le reconnaît pas. Toute idée de comment résoudre ce problème?
J'ai essayé de le faire passer comme accessoire mais sans succès
export default function ProgramCard() { const [count, setCount] = useState(0); const handleIncrement = () => { console.log(1) setCount(prevCount => prevCount + 1); }; const handleDecrement = () => { setCount(prevCount => prevCount - 1); }; const [opened, { open, close }] = useDisclosure(false); const openModal = () => modals.openConfirmModal({ title: 'Input Data', children: ( <div> <Button placeholder='-' onClick={handleDecrement}></Button>{" # "}{count}{" # "} <Button placeholder='+' onClick={handleIncrement}></Button> </div> ), labels: { confirm: 'Confirm', cancel: 'Cancel' }, onCancel: () => console.log('Cancel'), onConfirm: () => notifications.show({ title: 'Input Submitted', message: 'Complete', }), }); return ( <Grid.Col span={2}> <Paper shadow="xs" radius="md" p="sm"> <Text fw={700}>Sample</Text> <br></br> <Space h="xs" /> <Button variant={'light'} radius="xl" size="xs" onClick={openModal}> Record </Button> </Paper> </Grid.Col> ) }
J'ai essayé de le faire passer comme accessoire mais sans succès
P粉4959559862024-04-04 12:55:16
Je pense que tu as juste besoin de réussir handleIncrement
:
En raison du fonctionnement des fermetures en javascript, peu importe où vous appelez handleIncrement
,它仍然会引用 setCount
,而 setCount
又引用 count
, elles feront toujours référence à setCount
, qui à son tour fait référence à count
À l'intérieur du composant Modal
, vous pourriez avoir un bouton