Javascript 从子级到父级处理onClick（）方法（React）

所以我有两个组件：按钮和应用程序。按钮组件映射数组中的一组按钮，并在应用程序父级中调用。现在，当我单击按钮组件中的某个按钮时，我希望它将该特定id及其名称返回给父组件，以便可以在应用程序中进行设置

这是我的密码：

App.JS：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Button from "./Button.js";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      displayTop: "test",
      displayBot: 0,
    };
  }

  render() {
    return (
      <div id="container">
        <div id="displayTop">{this.state.displayTop}</div>
        <div id="display">{this.state.displayBot}</div>
        <Button />
      </div>
    );
  }
}
export default App;

Button.JS

import React from "react";
import "./Button.css";

const buttonData = [
  { id: "clear", name: "AC" },
  { id: "divide", name: "/" },
  { id: "multiply", name: "*" },
  { id: "seven", name: "7" },
  { id: "eight", name: "8" },
  { id: "nine", name: "9" },
  { id: "subtract", name: "-" },
  { id: "four", name: "4" },
  { id: "five", name: "5" },
  { id: "six", name: "6" },
  { id: "add", name: "+" },
  { id: "one", name: "1" },
  { id: "two", name: "2" },
  { id: "three", name: "3" },
  { id: "equals", name: "=" },
  { id: "zero", name: "0" },
  { id: "decimal", name: "." },
];

class Button extends React.Component {
  constructor() {
    super();
  }

  render() {
    const info = buttonData.map((info) => (
      <button id={info.id}>{info.name}</button>
    ));

    return info;
  }
}

export default Button;

任何帮助都将被告知

---

谢谢

您可以将单击处理程序作为道具从父组件传递到按钮组件。例如，onClick

并在传递要作为参数传递的数据时调用handler函数

class Button extends React.Component {
  constructor() {
    super();
  }

  render() {
    const { onClick } = this.props;
    const info = buttonData.map((info) => (
      <button id={info.id} onClick={() => onClick(info.id, info.name)}>{info.name}</button>
    ));

    return info;
  }
}

---

您必须从应用程序组件传递一个道具，然后将其用于按钮的每个onClick属性

 class App extends React.Component {
      constructor() {
        super();
        this.state = {
          displayTop: "test",
          displayBot: 0,
        };
      }

      getData = (id, name) => console.log(id, name);

      render() {
        return (
          <div id="container">
            <div id="displayTop">{this.state.displayTop}</div>
            <div id="display">{this.state.displayBot}</div>
            <Button onClick={getData} />
          </div>
        );
      }
        }
        export default App;

然后在按钮组件中：

import React from "react";
import "./Button.css";

const buttonData = [
  { id: "clear", name: "AC" },
  { id: "divide", name: "/" },
  { id: "multiply", name: "*" },
  { id: "seven", name: "7" },
  { id: "eight", name: "8" },
  { id: "nine", name: "9" },
  { id: "subtract", name: "-" },
  { id: "four", name: "4" },
  { id: "five", name: "5" },
  { id: "six", name: "6" },
  { id: "add", name: "+" },
  { id: "one", name: "1" },
  { id: "two", name: "2" },
  { id: "three", name: "3" },
  { id: "equals", name: "=" },
  { id: "zero", name: "0" },
  { id: "decimal", name: "." },
];

class Button extends React.Component {
  constructor() {
    super();
  }

  handleClick = (id, name) => () => {
    props.onClick(id, name)
  }
  render() {
    const info = buttonData.map((info) => (
      <button onClick={handleClick(info.id, info.name)} id={info.id}>{info.name}</button>
    ));

    return info;
  }
}

export default Button;

---

获取以下错误：./src/Button.js第31:43行：“onClick”未定义没有未定义您是否错过添加const{onClick}=this.props；内部按钮的渲染？

import React from "react";
import "./Button.css";

const buttonData = [
  { id: "clear", name: "AC" },
  { id: "divide", name: "/" },
  { id: "multiply", name: "*" },
  { id: "seven", name: "7" },
  { id: "eight", name: "8" },
  { id: "nine", name: "9" },
  { id: "subtract", name: "-" },
  { id: "four", name: "4" },
  { id: "five", name: "5" },
  { id: "six", name: "6" },
  { id: "add", name: "+" },
  { id: "one", name: "1" },
  { id: "two", name: "2" },
  { id: "three", name: "3" },
  { id: "equals", name: "=" },
  { id: "zero", name: "0" },
  { id: "decimal", name: "." },
];

class Button extends React.Component {
  constructor() {
    super();
  }

  handleClick = (id, name) => () => {
    props.onClick(id, name)
  }
  render() {
    const info = buttonData.map((info) => (
      <button onClick={handleClick(info.id, info.name)} id={info.id}>{info.name}</button>
    ));

    return info;
  }
}

export default Button;