suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Modalzähler

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

P粉458725040P粉458725040241 Tage vor444

Antworte allen(1)Ich werde antworten

  • P粉495955986

    P粉4959559862024-04-04 12:55:16

    我认为你只需要传递 handleIncrement:

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

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

    Antwort
    0
  • StornierenAntwort