Question

所以我有2个组件：Button和App。 Button组件从数组映射一组按钮，并在App父级中调用。现在，当我在Button组件中单击一个按钮时，我希望它将该特定的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;

任何帮助将不胜感激！

谢谢！

Answer 1

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

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

  handleClick = (id, name) => {
      console.log('you just clicked', { id, name });
  }

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

并在传递要作为参数传递的数据时调用处理程序函数。

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;
  }
}

Answer 2

您必须从#组件传递道具，然后将其用于按钮的每个case msg => stash() ... unstashAll() context.become(active(file))属性。

App

然后在Button组件中：

onClick

从孩子到父母处理onClick（）方法（反应）

2 个答案: