javascript - React - 如何从子组件获取状态数据？

Question

我刚刚开始学习 React，目前正在构建一个表单，到目前为止，我已经创建了一个父组件“Form”，并且我已将其余输入分离为组件，每个组件都有自己的状态。我的问题是如何从子组件获取状态数据并在提交表单时在父组件“表单”中使用它？

这是我的父组件

import React, { Component } from "react";

import Name from "components/Name";
import Email from "components/Email";
import Select from "components/Select";
import Bio from "components/Bio";

class Form extends Component {
    handleSubmit = event => {
        event.preventDefault();
    };

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <div className="shape rectangle"></div>
                <div className="shape triangle"></div>
                <div className="shape circle"></div>
                <Name />
                <Email />
                <Select />
                <Bio />
                <button type="submit" className="btn">
                    Submit
                </button>
            </form>
        );
    }
}

export default Form;

以及子组件之一

import React, { Component } from "react";

// Create Name component for name && email inputs
class Name extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: "",
      lastName: ""
    };
  }

  // Handle first name input on change event
  handleFirstNameChange = event => {
    this.setState({
      firstName: event.target.value
    });
  };

  // Handle last name input on change event
  handleLastNameChange = event => {
    this.setState({
      lastName: event.target.value
    });
  };

  // Render labels and name inputs
  render() {
    const { firstName, lastName } = this.state;
    return (
      <div className="form-names">
        <label htmlFor="firstName">Name</label>
        <br/>
        <input
          type="text"
          name="firstName"
          value={firstName}
          placeholder="First Name"
          id="firstName"
          onChange={this.handleFirstNameChange}
        />
        <input
          type="text"
          name="lastName"
          value={lastName}
          placeholder="Last Name"
          id="lastName"
          onChange={this.handleLastNameChange}
        />
      </div>
    );
  }
}

export default Name;

Answer 1

要实现此目的，您需要将状态“提升”到公共(public)父组件(称为祖先组件)，在您的情况下，这将是 <Form>成分。然后，您可以将值传递给每个相应的子组件，如 props 。

它看起来像这样:

import React, { Component } from "react";

import Name from "./Name";
// More imports go here..

class Form extends Component {
  state = {
    firstName: "",
    lastName: ""
  };

  handleSubmit = event => {
    event.preventDefault();
  };

  // Handle first name input on change event
  handleFirstNameChange = event => {
    this.setState({
      firstName: event.target.value
    });
  };

  // Handle last name input on change event
  handleLastNameChange = event => {
    this.setState({
      lastName: event.target.value
    });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <Name
          firstName={this.state.firstname}
          lastName={this.state.lastName}
          handleFirstNameChange={this.handleFirstNameChange}
          handleLastNameChange={this.handleLastNameChange}
        />
        {/* More components go here.. */}
        <p>Current state:</p>
        {JSON.stringify(this.state)}
      </form>
    );
  }
}

export default Form;

Working example

更多信息:Lifting state up来自官方 React 文档。