React组件通信问题：如何在caldisplay中获取keypad的点击值？

你的问题核心是组件间状态通信，之前的做法错误在于：

• handleclick是keypad组件内部的私有函数，没有对外导出，直接导入会导致模块解析错误，让整个App崩溃。
• 就算能导入，函数返回的num也没法在组件间持久化共享——函数执行完后值就消失了，没有状态容器存储它。

正确的做法是用状态提升：把需要共享的状态放到两个组件的共同父组件（比如App.jsx）里，通过props传递回调和状态值。

步骤1：修改父组件（App.jsx） #

在父组件中维护显示状态，并提供更新状态的回调函数：

import React, { useState } from 'react';
import Keypad from './keypad';
import CalDisplay from './caldisplay';

function App() {
  // 存储要显示的数值
  const [displayValue, setDisplayValue] = useState('');

  // 处理按钮点击的回调，更新显示状态
  const handleButtonClick = (num) => {
    console.log("点击的按钮是：" + num);
    // 这里可以根据需求拼接或替换数值，当前为追加模式
    setDisplayValue(prev => prev + num);
  };

  return (
    <div className="calculator">
      {/* 把显示状态传给CalDisplay */}
      <CalDisplay value={displayValue} />
      {/* 把回调函数传给Keypad */}
      <Keypad onButtonClick={handleButtonClick} />
    </div>
  );
}

export default App;

步骤2：修改Keypad组件 #

去掉内部的handleclick，改用父组件传入的回调函数：

import React from 'react'
import './style.css'

// 组件名首字母大写（React规范）
function Keypad({ onButtonClick }) {
  return (
    <div className='keypad'>
        {/* 点击时调用父组件传的回调，传入对应数值 */}
        <div onClick={() => onButtonClick("%")} className=' percentage button'>%</div>
        <div onClick={() => onButtonClick("CE")} className=' Clearall button'>CE</div>
        <div onClick={() => onButtonClick("C")} className=' Clear button'>C</div>
        <div onClick={() => onButtonClick("DEL")} className=' Delete button'>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" className="lucide lucide-delete"><path d="M20 5H9l-7 7 7 7h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2Z"/><line x1="18" x2="12" y1="9" y2="15"/><line x1="12" x2="18" y1="9" y2="15"/></svg>
        </div>
        <div onClick={() => onButtonClick("1/x")} className=' inverse button'>1/x</div>
        <div onClick={() => onButtonClick("x²")} className=' square button'>x²</div>
        <div onClick={() => onButtonClick("√x")} className=' sqroot button'>²√x</div>
        <div onClick={() => onButtonClick("/")} className=' division button'>/</div>
        <div onClick={() => onButtonClick("7")} className=' seven button'>7</div>
        <div onClick={() => onButtonClick("8")} className=' eight button'>8</div>
        <div onClick={() => onButtonClick("9")} className=' nine button'>9</div>
        <div onClick={() => onButtonClick("*")} className='multiply button'>X</div>
        <div onClick={() => onButtonClick("4")} className=' four button'>4</div>
        <div onClick={() => onButtonClick("5")} className=' five button'>5</div>
        <div onClick={() => onButtonClick("6")} className=' six button'>6</div>
        <div onClick={() => onButtonClick("-")} className=' minus button'>-</div>
        <div onClick={() => onButtonClick("1")} className=' one button'>1</div>
        <div onClick={() => onButtonClick("2")} className=' two button'>2</div>
        <div onClick={() => onButtonClick("3")} className=' three button'>3</div>
        <div onClick={() => onButtonClick("+")} className=' plus button'>+</div>
        <div onClick={() => onButtonClick("+/-")} className=' negate button'>+/-</div>
        <div onClick={() => onButtonClick("0")} className=' zero button'>0</div>
        <div onClick={() => onButtonClick(".")} className=' dot button'>.</div>
        <div onClick={() => onButtonClick("=")} className=' equalsto button'>=</div>
    </div>
  )
}

export default Keypad

步骤3：修改CalDisplay组件 #

接收父组件传入的value并展示：

import React from 'react'
import './style.css'

// 组件名首字母大写（React规范）
function CalDisplay({ value }) {
  return (
    <div className='display'>
      {/* 显示父组件传递的状态值，默认显示0 */}
      {value || '0'}
    </div>
  )
}

export default CalDisplay

额外说明 #

• 组件名首字母大写是React的强制规范，避免和原生HTML标签混淆。
• 如果后续需要更复杂的状态共享（比如多个组件层级较深），可以考虑使用Context API或Redux，但当前场景下状态提升已经足够简洁。

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