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

Question

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

我有两个组成部分。主要成分是 'App' 成分，另一个成分是 'Popup' 成分。

这是我的代码：

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;

Popup.js

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

class Popup extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ""
    };

    // I want to pass the submitted value to the App Component
    this.handleSubmit = this.props.handleSubmit.bind(this, this.state.value);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <React.Fragment>
        <div className="popup">
          <div className="popup_inner">
            <div> Create New Entry </div>
            <form onSubmit={this.handleSubmit}>
              <label>
                <input
                  type="text"
                  name="name"
                  value={this.state.value}
                  onChange={this.handleChange}
                />
              </label>
              <input type="submit" value="Submit" />
            </form>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Popup;

styles.css

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

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

将值传递给 App 组件的合适方法是什么？

我还是 React 的新手，所以请多多包涵。

提前致谢。

Answer 1

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

onSubmit = {this.props.handleSubmit}

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

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

React JS: How to pass a value to other Component onSubmit

components

parameter-passing

onsubmit

reactjs