Реакция - Как получить данные о состоянии от дочернего компонента?

Question

Я только начинаю учиться реагировать, и в настоящее время я создаю форму, поэтому я создал родительский компонент «Форма» и отделил остальные входные данные как компоненты, и каждый компонент имеет свое собственное состояние. , У меня вопрос, как получить эти данные состояния из дочерних компонентов и использовать их в родительском компоненте «Форма» при отправке формы?

Вот мой родительский компонент

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

Чтобы выполнить sh, вам необходимо «поднять состояние» до общего родительского компонента (известного как компонент-предок), в вашем случае это будет компонент <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;

Рабочий пример

Дополнительная информация: Состояние подъема вверх из официальные документы React.

Answer 2

вы можете использовать одно состояние в родительском компоненте и передавать имя и фамилию в реквизитах, ваш код станет:

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 {
  state = {
    firstName: '',
    lastName: '',
  }

  onChange = (e) => {
  this.setState({[e.target.name] : e.target.value})
  }

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

  render() {
    return (
        ...
        <Name onChange={this.onChange} firstName={this.state.firstName} lastName={this.state.lastName} />
        ...
        <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 {


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

export default Name;

Answer 3

Я думаю сделать что-то вроде следующего, передавая данные как реквизиты компоненту. Но это не имеет смысла для меня, поскольку, когда вы нажимаете кнопку отправки, форма собирает данные из родительского компонента. Лучше сохранить форму в родительском компоненте и сгруппировать все входные данные в состояние.

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 {
    constructor(props){
      super(props)
      this.state = {
        firstName = "",
        lastName = "",
        (and other input data you need)...
      }
    }

    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 firstName={this.state.firstName} lastName={this.state.lastName}/>
                <Email (inputData as props)/>
                <Select (inputData as props)/>
                <Bio (inputData as props)/>
                <button type="submit" className="btn">
                    Submit
                </button>
            </form>
        );
    }
}

export default Form;

Answer 4

Вы можете использовать что-то вроде Context или Redux , что позволит вам создать универсальное хранилище и получить состояние из любого компонента или . Методы создания в ваш родительский компонент, передайте их дочерним компонентам и вызовите их из этого дочернего компонента. Например, вы можете иметь handleFirstNameChange в Form и передать его до Name. При этом вы теперь сохраняете реквизиты, такие как name в Form, и также пропускаете их.