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

【问题标题】：React: How to extract values from Modals?React：如何从模态中提取值？
【发布时间】：2021-05-15 02:35:05
【问题描述】：

我有一个 Chakra UI 模态，它打开一个按钮的单击。我希望能够提取用户在关闭模态时放入输入/单选按钮的值。 Modal 类和 Modal/Button 渲染如下所示。由于输入和单选按钮是在 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}
/>

【问题讨论】：

标签： javascript reactjs typescript modal-dialog chakra-ui

【解决方案1】：

您可能应该发送一个状态作为模态的道具。

const [state, setState] = React.useState();
<Modal 
  label="Custom Settings"
  isOpen={isOpen} 
  onClose={onClose}
  onChange={setState}
/>

要获取 setState 的类型，将鼠标悬停在变量上即可看到类型定义。

【讨论】：