Reactjs React JS：如何在提交时将值传递给其他组件

我试图创建一个按钮，点击后会弹出一个窗口。弹出窗口包含一个表单，可以让我输入任何新条目。提交时，条目应传递给主组件

我有两个部分。主要组件是“应用”组件，另一个组件是“弹出”组件

这是我的密码：

App.js

import React, { Component } from "react";
import Popup from "./Popup.js";
import "./styles.css";

class App extends Component {
  showPopup = false;

  createEntry = () => {
    this.showPopup = true;
    this.setState({ showPopup: this.showPopup });
  };

  handleSubmit = (value) => {
    console.log("New Entry: " + value);
    this.showPopup = false;
    this.setState({ showPopup: this.showPopup });
  };

  render() {
    return (
      <React.Fragment>
        <button onClick={this.createEntry}> + </button>
        {this.showPopup ? <Popup handleSubmit={this.handleSubmit} /> : null}
      </React.Fragment>
    );
  }
}

export default App;

我试图通过使用handleSubmit作为prop方法将“value”传递给“handleSubmit”方法，但这不起作用

将值传递给应用程序组件的适当方式是什么

我还没有反应过来，所以请容忍我

---

提前谢谢。

答案在你的问题中。您将它作为prop方法传递，因此必须从props访问它。 在Popup.js中，您可以将从父级传递的方法作为

onSubmit = {this.props.handleSubmit}

---

我创建了一个示例来演示从父组件到子组件的数据流，反之亦然

有人在下面的链接中回答了这个问题。请再试一次。

.App {
  font-family: sans-serif;
  text-align: center;
}
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
}

onSubmit = {this.props.handleSubmit}