试图在Chakra UI Modal中调用函数onclick whot＆＃x27;

Question

我有一个函数来执行一些称为“ handerestimate”的计算，我希望该功能在chakraui模式中单击按钮。但是，当我单击模式内的按钮时，功能将无法运行。我在模态组件外的外部尝试了同一件事，并且可以使用。我还尝试定义模态组件中的功能，这是行不通的。

处理

 async function handleEstimate() {
    register({ name: "estimatedPayment", type: "custom" });
    setValue("estimatedPayment", calcData
    .filter( (term) => term.newOrUsed === state.data.carStatus && term.year === state.data.modelYear )
    .map((filteredTerm) => (Math.round(
    
    ((state.data.price - state.data.price * (filteredTerm.deposit / 100)) *
      
      (filteredTerm.rate / 100 / 12) *
      
      Math.pow( 1 + filteredTerm.rate / 100 / 12, filteredTerm.term  )) /
      
      (Math.pow( 1 + filteredTerm.rate / 100 / 12,  filteredTerm.term) - 1)
    ))));
    register({ name: "calcTerm", type: "custom" });
    setValue("calcTerm", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.term *12 - 0));
    register({ name: "calcRate", type: "custom" });
    setValue("calcRate", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.rate - 0));
    register({ name: "calcDeposit", type: "custom" });
    setValue("calcDeposit", calcData
    .filter(
      (term) =>
        term.newOrUsed === state.data.carStatus &&
        term.year === state.data.modelYear
    )
    .map((filteredTerm) => filteredTerm.deposit - 0));
  }

chakraui模态组件

  function BasicUsage() {


        return (
      <>
        <Button colorScheme='e65323' className="centered-button" onClick={onOpen}>Save & 
              Continue</Button>
        <Modal isOpen={isOpen} onClose={onClose}>
          <ModalOverlay />
          <ModalContent>
            <ModalHeader>Request For Personal Details</ModalHeader>
            <ModalCloseButton />
            <ModalBody>
            Note: 
            
            We will now ask you for some personal details in order to better match you with the right Banks.
            
            Your information is safe. If you do not complete your request for us to send your information to Banks within 7 days, we will permanently delete your information.

            </ModalBody>
  
            <ModalFooter>
              
              <Button  onClick={handleEstimate} colorScheme='blue' mr={3}>
               Continue
              </Button>

              <Button onClick={onClose} variant='ghost'>Save & Exit</Button>

            </ModalFooter>
          </ModalContent>
        </Modal>
      </>
    )
  }

我然后使用页面上的模态组件：

 <BasicUsage></BasicUsage>
          
     <button  onClick={handleEstimate} className="centered-button">
             
            </button>

html按钮元素成功调用该函数，但是当我打开模态并单击：

<Button onClick={handleEstimate} colorScheme='blue' mr={3}>
               Continue
              </Button>

未调用函数时