kaunter modal

Question

Saya cuba mencipta modal dengan pembilang +/-.

Namun, saya fikir memandangkan keadaan berada dalam komponen asas, modal tidak mengenalinya. Sebarang idea bagaimana untuk membetulkannya?

Saya cuba menyampaikannya sebagai prop tetapi tidak berjaya

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>
    
  )
}

Saya cuba menyampaikannya sebagai prop tetapi tidak berjaya

Answer 1

Saya rasa anda hanya perlu lulus handleIncrement:

Disebabkan cara penutupan berfungsi dalam javascript, tidak kira di mana anda memanggil handleIncrement，它仍然会引用 setCount，而 setCount 又引用 count, ia akan tetap merujuk setCount, yang seterusnya merujuk count

Di dalam komponen Modal anda mungkin mempunyai butang

Increase