莫代爾計數器

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