时间戳

首页 > 解决方案 > React：如何从模态中提取值？

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

问题描述

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

模态的.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}
/>

标签： javascriptreactjstypescriptmodal-dialogchakra-ui

解决方案

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

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

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

推荐阅读