莫代尔计数器

Question

我正在尝试创建一个具有 /-计数器的模态。

但是，我认为由于状态位于基础组件中，模态无法识别它。知道如何解决吗？

我尝试将它作为道具传递，但没有成功

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

我尝试将它作为道具传递，但没有成功

Answer 1

我认为你只需要传递 handleIncrement:

由于闭包在 javascript 中的工作方式，无论您在哪里调用 handleIncrement，它仍然会引用 setCount，而 setCount 又引用 count

在 Modal 组件内部，您可能有一个按钮

Increase