无法在React中的组件之间传递数据

Question

我正在制作一个简单的计算器应用程序，其中我想在其中显示显示组件中按钮组件的值，但是我没有得到如何执行此操作的

代码：

计算器组件的代码：< /strong>

import React from "react";
import "./Calculator.css";
import Button from "./Button";
import { useState } from "react";
import Display from "./Display";

const Calculator = () => {
  const [Data, setData] = useState("");
  return (
    <>
      <center>
        <h1 className="title">Calculator</h1>
        <br />
        <Display data={Data} />
        <div className="btncontainer">
          <Button name="+" onClick={() => setData("+")}></Button>
          <Button name="-" onClick={() => setData("-")}></Button>
          <Button name="/" onClick={() => setData("/")}></Button>
          <Button name="X" onClick={() => setData("X")}></Button>
          <Button name="1" onClick={() => setData("1")}></Button>
          <Button name="2" onClick={() => setData("2")}></Button>
          <Button name="3" onClick={() => setData("3")}></Button>
          <Button name="4" onClick={() => setData("4")}></Button>
          <Button name="5" onClick={() => setData("5")}></Button>
          <Button name="6" onClick={() => setData("6")}></Button>
          <Button name="7" onClick={() => setData("7")}></Button>
          <Button name="8" onClick={() => setData("8")}></Button>
          <Button name="9" onClick={() => setData("9")}></Button>
          <Button name="0" onClick={() => setData("0")}></Button>
          <Button name="=" onClick={() => setData("=")}></Button>
        </div>
      </center>
    </>
  );
};

export default Calculator;
 

显示组件的代码：

import React from "react";

const Display = (props) => {
  console.log("Props in display : ", props);
  const handleOnChange = (e) => {
    props.data = e.target.value;
  };
  return (
    <input type="text" value={props.data} onChange={handleOnChange} readOnly />
  );
};

export default Display;
 

按钮组件的代码：

import React from "react";
import "./Button.css";
const Button = (props) => {
  return (
    <input
      type="button"
      className="btn"
      value={props.name}
      onClick={props.onClick(props.name)}
    ></input>
  );
};

export default Button;
 

当我刚开始学习React时，请忽略我的愚蠢错误

Answer 1

在按钮组件中，如果要将参数传递给该函数，则要将OnClick设置为箭头函数。

onclick = {（）=＆gt; props.onclick（props.name）}

在显示组件中，您应该传递setData函数，并将其用于OnChange。

onChange = {（e）=＆gt; setData（e.target.value）}

如果要单击所有按钮的字符串，则可以更改按钮onclick以添加到当前数据值而不是替换。
例如，对于按钮5：

onclick = {（）=＆gt; setData（data+'5'}