Question

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

我有两个组成部分。主要组件是“ 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

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

onSubmit = {this.props.handleSubmit}

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

React JS：如何将值传递给其他组件onSubmit

1 个答案: