React：如何从模态中提取值？

问题描述

我有一个 Chakra UI 模态，它在单击按钮时打开。我希望能够提取用户在关闭模态时放入输入/单选按钮的值。模态类和模态/按钮渲染如下所示。由于输入和单选按钮是在 Modal 类中定义的，是否有可能获得它们的最终值 onClose？

Modal.tsx

import React from 'react'
import {
    Modal as ChakraModal,Modaloverlay,ModalContent,ModalHeader,ModalFooter,ModalBody,ModalCloseButton,RadioGroup,Stack,Radio,vstack
  } from "@chakra-ui/react"
import Button from './Button'
import Input from './Input'


type Props = { isOpen : boolean } & { onClose : () => void} & { label : string } 

const Modal = ({ label,isOpen,onClose,...rest }: Props) => (
    <ChakraModal {...rest} isOpen={isOpen} onClose={onClose}>
      <Modaloverlay />
      <ModalContent>
        <ModalHeader>{label}</ModalHeader>
        <ModalCloseButton />
        <ModalBody>
          <vstack spacing={4}>
            <RadioGroup>
              <Stack direction="row">
                <Radio value="1">Annually</Radio>
                <Radio value="2">Semi-Annual</Radio>
                <Radio value="3">Quarterly</Radio>
                <Radio value="4">Monthly</Radio>
              </Stack>
            </RadioGroup>
            <Input  
              label="Custom Interest rate"
              name="Custom Interest rate"
            />
          </vstack>
        </ModalBody>
        <ModalFooter>
          <Button colorScheme="blue" mr={3} onClick={onClose}>
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </ChakraModal>
)

export default Modal

渲染

<Button onClick={onopen}> Settings </Button>
<Modal 
  label="Custom Settings"
  isOpen={isOpen} 
  onClose={onClose}
/>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）