javascript - 如何将按钮值从一个组件移动到另一个组件？

Question

我正在尝试制作一个计算器应用程序，其中涉及 3 个主要组件。应用程序标题所在的顶部栏和一个切换主题的开关、一个显示算术运算及其结果的屏幕组件以及一个包含所有可用可点击数字和数学运算的键盘组件。我使用 Chakra UI 库来构建我的应用程序。有没有办法获取键盘组件中按钮的值并将其“发送”到会发生算术的屏幕组件？

import * as React from "react"
import {
  ChakraProvider,
  Box,
  Text,
  Flex,
  Center,
  Spacer,
  Container,
  VStack,
  FormControl,
  FormLabel,
  Switch,
  useColorMode,
  useColorModeValue,
  Input,
  Grid,
  GridItem
} from "@chakra-ui/react"
import "@fontsource/spartan/700.css"
import customTheme from "./theme"
import CalculatorButton from "./button-component";
import FunctionalButton from "./function-component";

export default function App(){
  

  return (
    <ChakraProvider theme={theme}>
    <Box bg={"bisque"} color={"white"} h="100vh">
      {/* Main App Container */}
      <Box>
        <Center>
          <VStack>
            {/* Top bar */}
            {TopBar()}
            {/* Result Display */}
            {DisplayResult()}
            {/* Keys pad */}
            {KeypadButtons()}
          </VStack>
        </Center>
      </Box>
    </Box>
  </ChakraProvider>
  );
}

function TopBar() {
  return (
    <Container p="0">
      <Flex align="center" justify="space-between">
      <Box>
        <Text fontSize="22" fontWeight="bold">calc</Text>
      </Box>
      <Spacer />
      <Box>
        <FormControl display="flex" alignItems="center">
          <FormLabel htmlFor="theme-switch" mb="0" fontSize="9">
            THEME
          </FormLabel>
          <Switch id="theme-switch" size="sm" />
        </FormControl>
      </Box>
      </Flex>
    </Container>
  );
}

function DisplayResult() {
  interface CalculatorData {
    value:number,
    prevState:null,
  }
  const [value,setValue] = useState<CalculatorData | null>(null);
  return (
    <Box size="lg" mb="2" sx={{ width: "100%" }}>
    <Input
      placeholder="0"
      textAlign="right"
      p="10"
      bg={darkSaturatedBlue.screenBackgroundColor}
      border="none"
      fontSize="23"
      // value={value}
      // onChange={(e)=>setValue(parseInt(e.target.value))}
       />
    </Box>
  );
}

function KeypadButtons() {
  return <Container bg={darkSaturatedBlue.toggleKeybadBackgroundColor} borderRadius="3" p="3">
    <Grid templateColumns="repeat(4,1fr)" templateRows="repeat(5,1fr)" gap="2">
      <CalculatorButton digit={7} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor} />
      <CalculatorButton digit={8} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <CalculatorButton digit={9} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <FunctionalButton digit={"DEL"} color="white" size="md" boxShadow="md"  />
      <CalculatorButton digit={4} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <CalculatorButton digit={5} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <CalculatorButton digit={6} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <FunctionalButton digit={"+"} color="white" size="md" boxShadow="md" />
      <CalculatorButton digit={1} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <CalculatorButton digit={2} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <CalculatorButton digit={3} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <FunctionalButton digit={"-"} color="white" size="md" boxShadow="md" />
      <FunctionalButton digit={"."} color="white" size="md" boxShadow="md" />
      <CalculatorButton digit={0} color="white" size="md" bg={darkSaturatedBlue.buttonDigitColor}/>
      <FunctionalButton digit={"/"} color="white" size="md" boxShadow="md" />
      <FunctionalButton digit={"x"} color="white" size="md"  boxShadow="md"/>
      <GridItem colSpan={2}>
        <FunctionalButton digit={"RESET"} color="teal" size="md" style={buttonStyle} boxShadow="md" />
      </GridItem>
      <GridItem colSpan={2}>
        <FunctionalButton digit={"="} color="red" size="md" style={buttonStyle} boxShadow="md" />
      </GridItem>
    </Grid>
  </Container>;
}

计算器按钮.tsx

import * as React from 'react';
import {Button} from '@chakra-ui/react';


const CalculatorButton: React.FC<{digit:Number,color:string,bg?:string,size:string}> = ({digit,color,bg,size}) => {
    return (
        <Button colorScheme="White" size={size} m="1" bg={bg} variant="solid">
            {digit}
        </Button>
    );
}

export default CalculatorButton;

函数组件.tsx

import * as React from 'react';
import {Button} from '@chakra-ui/react';

const FunctionalButton : React.FC<{digit:string,color:string,boxShadow:string,size:string,style?:object}> = ({digit,color,boxShadow,size,style}) => {
    return (
        <Button colorScheme={color} size={size} sx={style} m="1" boxShadow={boxShadow}>
            {digit}
        </Button>
    )
}

export default FunctionalButton;

标签： javascripthtmlreactjstypescript