Javascript 反应-如何从子组件获取状态数据？

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

这是我的父组件

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}来自“React”；
从“组件/名称”导入名称；
从“组件/电子邮件”导入电子邮件；
从“组件/选择”导入选择；
从“组件/Bio”导入Bio；
类形式扩展组件{
handleSubmit=事件=>{
event.preventDefault（）；
};
render（）{
返回(
提交
);
}
}
导出默认表单；

和一个子组件

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;

import React，{Component}来自“React”；
//为名称和电子邮件输入创建名称组件（&E）
类名扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名字：“，
姓氏：“
};
}
//处理更改事件的名字输入
handleFirstNameChange=事件=>{
这是我的国家({
名字：event.target.value
});
};
//处理更改事件上的姓氏输入
handleLastNameChange=事件=>{
这是我的国家({
lastName:event.target.value
});
};
//渲染标签和名称输入
render（）{
const{firstName，lastName}=this.state；
返回(
名称


);
}
}
导出默认名称；

您可以使用类似或的东西，这将允许您创建一个通用存储并从任何组件中检索状态，或者在父组件中创建方法，将它们传递给它的子组件，并从该子组件中调用它们。例如，您可以在

表单中设置
handleFirstNameChange
，并将其传递给
Name
。在这样做的过程中，您现在可以在
表单中保留
name
等道具，并将其向下传递。
您可以在父组件中使用单个状态，并在道具中传递firstname和lastname，您的代码将变为：

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}来自“React”；
从“组件/名称”导入名称；
从“组件/电子邮件”导入电子邮件；
从“组件/选择”导入选择；
从“组件/Bio”导入Bio；
类形式扩展组件{
状态={
名字：''，
姓氏：“”，
}
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）
}
handleSubmit=事件=>{
event.preventDefault（）
}
render（）{
返回(
...
...
提交
)
}
}
导出默认表单；

您的子组件变成：

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;

import React，{Component}来自“React”；
//为名称和电子邮件输入创建名称组件（&E）
类名扩展组件{
render（）{
const{firstName，lastName，onChange}=this.props；
返回(
名称


);
}
}
导出默认名称；
我的想法是执行以下操作，将数据作为道具传递给组件。但这对我来说没有意义，因为当您单击submit按钮时，表单将从父组件收集数据。它可以更好地将表单保存在父组件中，并将所有输入数据分组为状态

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;

import React，{Component}来自“React”；
从“组件/名称”导入名称；
从“组件/电子邮件”导入电子邮件；
从“组件/选择”导入选择；
从“组件/Bio”导入Bio；
类形式扩展组件{
建造师（道具）{
超级（道具）
此.state={
firstName=“”，
lastName=“”，
（以及您需要的其他输入数据）。。。
}
}
handleSubmit=事件=>{
event.preventDefault（）；
};
render（）{
返回(
提交
);
}
}
导出默认表单；
要实现这一点，您需要将状态提升到一个公共父组件（称为祖先组件），在您的情况下，这将是
组件。然后将值作为
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;

import React，{Component}来自“React”；
从“/Name”导入名称；
//这里有更多的进口货。。
类形式扩展组件{
状态={
名字：“，
姓氏：“
};
handleSubmit=事件=>{
event.preventDefault（）；
};
//处理更改事件的名字输入
handleFirstNameChange=事件=>{
这是我的国家({
名字：event.target.value
});
};
//处理更改事件上的姓氏输入
handleLastNameChange=事件=>{
这是我的国家({
lastName:event.target.value
});
};
render（）{
返回(
{/*此处有更多组件..*/}
当前状态：

{JSON.stringify（this.state）}
);
}
}
导出默认表单；


更多信息：来自官方的React文档。
将状态放在家长和onChange听众中，并将其作为建议传递给孩子们。我会尝试现在我的React知识仍然非常基础，我对上下文和Redux都不熟悉。如果你还是一个新的React参与者，那么他们的总体概念相当深刻。如果你感兴趣，我会仔细阅读，看看它们是否适合你的需要。在此期间，我只是把我的道具传下去，就像我在巴黎公园里描述的那样