Modalzähler

Question

Ich versuche, ein Modal mit einem +/- Zähler zu erstellen.

Ich denke jedoch, dass das Modal ihn nicht erkennt, da sich der Zustand in der zugrunde liegenden Komponente befindet. Irgendeine Idee, wie man das Problem beheben kann?

Ich habe versucht, es als Requisite weiterzugeben, aber ohne Erfolg

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

Ich habe versucht, es als Requisite weiterzugeben, aber ohne Erfolg

Answer 1

我认为你只需要传递 handleIncrement:

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

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

Increase