Chakra UI Modal内按钮onClick触发handleEstimate失效问题

问题表现 #

项目中定义的异步计算函数handleEstimate，绑定到Chakra UI Modal模态框内按钮的onClick事件时完全不执行，但绑定到Modal外部的原生HTML按钮时可以正常运行；将handleEstimate定义移动到Modal组件内部后问题仍存在。

核心原因 #

问题本质是组件作用域与引用传递错误，附带可能存在Portal渲染带来的样式/上下文问题：

1. 你封装的BasicUsage是独立函数组件，内部用到的isOpen、onOpen、onClose、handleEstimate等变量没有通过props接收，组件内部无法直接访问父组件作用域下的handleEstimate，实际绑定到按钮onClick上的值是undefined。React遇到值为undefined的事件回调时不会执行任何操作，也不会抛出显性错误，表现为函数完全不运行。
2. 父组件中写的原生<button>和handleEstimate处于同一作用域，可以直接拿到函数引用，所以点击正常。
3. 你尝试把函数移到Modal内部没生效，是因为仍然没有解决组件内函数引用的问题；如果函数定义写在组件return语句之后，也会因为时序问题无法被正确访问。
4. 如果排除引用问题后所有Modal内按钮都点击无响应，是Chakra Modal默认用Portal将内容挂载到document.body节点，可能存在遮罩层遮挡、脱离原有上下文的问题。

修复方案 #

1. 修正组件props传递 #

首先修改BasicUsage组件定义，显式接收需要的参数：

function BasicUsage({ isOpen, onOpen, onClose, handleEstimate }) {
  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时，将对应的状态和函数作为props传入：

// 父组件中用useDisclosure控制Modal显隐
const { isOpen, onOpen, onClose } = useDisclosure()

// 原handleEstimate逻辑保持不变
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));
}

// 渲染组件时传参
<BasicUsage 
  isOpen={isOpen}
  onOpen={onOpen}
  onClose={onClose}
  handleEstimate={handleEstimate}
/>
<button onClick={handleEstimate} className="centered-button"></button>

2. 排查点击事件遮挡问题 #

如果传参后Modal内所有按钮都点击无响应，先给按钮绑定测试回调确认事件是否触发：

<Button 
  onClick={() => {
    console.log('Modal内按钮被点击')
    handleEstimate?.()
  }} 
  colorScheme='blue' 
  mr={3}
>
  Continue
</Button>

• 如果控制台没有打印日志，说明按钮被遮挡：检查ModalOverlay的z-index是否高于ModalContent（Chakra默认ModalOverlay z-index为1400，ModalContent为1401，自定义过样式需要修正），同时检查按钮是否被设置了pointer-events: none，如果有改为auto。
• 如果不需要将Modal渲染到全局body节点，可以给Modal加useInPortal={false}属性，让Modal保留在当前组件树位置，避免Portal带来的样式和上下文问题。

3. 修复react-hook-form上下文丢失问题 #

如果点击日志能正常打印，但函数内register、setValue执行报错，是因为Portal渲染的Modal脱离了原组件树的FormProvider或者<form>标签上下文：

• 要么给Modal设置useInPortal={false}让它留在form内部
• 要么将FormProvider提升到应用根层级，保证全局挂载的组件也能访问到form实例。

内容的提问来源于stack exchange，提问作者Shelbert Miller