compteur modal

Question

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

Answer 1

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

Increase