Javascript m“反应”； 从“react bootstrap”导入{Alert、Form、Col、Row、Button、Card}； 从“/EmployeeForm”导入EmployeeForm； 从“/services/EmployeeService”导入EmployeeService； 导出默认类CreateEmployee扩展React.Component{ 构造函数（）{ 超级（）； this.employeeService=新的employeeService（）； 此.state={ 雇员：{ 名字：“， 姓氏：“， 出生日期：“， 被雇佣者：“， 性别：“ } }; } //在这里创建handleChange并将其作为道具传递给EmployeeForm //使用setState而不是mutate handleChange=e=>{ this.setState（{employee:{[e.target.id]：e.target.value}） }; 保存=（）=>{ console.log（this.state.values）； 这是雇员服务 .createEmployee（this.state.values） 。然后（结果=>{ this.setState（{error:null}）； }) .catch（错误=>{ 控制台日志（err）； this.setState（{error:err}）； }); }; render（）{ log（“reder:，this.state.employee”）； 返回( 雇员 创建员工 创造 ); } }

注意：我只修复了这个问题所要求的错误-您可能仍然需要重构代码的某些部分。不要忘记不要直接改变状态。

你正在改变状态：

this.props.employee[e.target.id]=e.target.value将一个更改函数从父级传递到子级，该函数执行设置状态而不发生变化。谢谢，这是实际的子级到父级通信。一旦用户在子窗体中输入了所有数据，我想将其传输到父窗体。谢谢，handleChange（）帮助解决了这个问题。
    import React, { Component } from "react";
    import { Form } from "react-bootstrap";

    export default class EmployeeForm extends Component {
      constructor(props) {
        super(props);
        console.log("this.props.employee ", this.props.employee);
      }

      /** Generic handle change events for all fields */
      handleChange = e => {
        this.props.employee[e.target.id] = e.target.value;
        console.log(e.target.value);
      };

      //   handleChange = (key, e) => {
      //     e.preventDefault();
      //     console.log(key);
      //     console.log(e.target.value);
      //     this.props.employee[key] = e.target.value;
      //   };

      render() {
        const { employee } = this.props;
        console.log("ef render ", employee.firstName);

        return (
          <div>
            <Form.Group controlId="firstName">
              <Form.Label>First name</Form.Label>
              <Form.Control
                type="text"
                value={employee.firstName}
                onChange={this.handleChange}
                placeholder="Enter first name"
              />
            </Form.Group>
            <Form.Group controlId="lastname">
              <Form.Label>Last name</Form.Label>
              <Form.Control
                type="text"
                value={employee.lastName}
                onChange={this.handleChange}
                placeholder="Enter last name"
              />
            </Form.Group>
            <Form.Group controlId="birthDate">
              <Form.Label>Date of birth</Form.Label>
              <Form.Control
                type="date"
                value={employee.birthDate}
                onChange={this.handleChange}
              />
            </Form.Group>
            <Form.Group controlId="hireDate">
              <Form.Label>Date of hire</Form.Label>
              <Form.Control
                type="date"
                value={employee.hireDate}
                onChange={this.handleChange}
              />
            </Form.Group>
            <Form.Group controlId="gender">
              <Form.Label>Gender</Form.Label>
              <Form.Control
                as="select"
                value={employee.gender}
                onChange={this.handleChange}
              >
                <option value="">Please select</option>
                <option value="F">Female</option>
                <option value="M">Male</option>
              </Form.Control>
            </Form.Group>
          </div>
        );
      }
    }

    import React from "react";
    import { Alert, Form, Col, Row, Button, Card } from "react-bootstrap";
    import EmployeeForm from "./EmployeeForm";
    import EmployeeService from "./services/EmployeeService";

    export default class CreateEmployee extends React.Component {
      constructor() {
        super();
        this.employeeService = new EmployeeService();
        this.state = {
          employee: {
            firstName: "",
            lastName: "",
            birthDate: "",
            hireDate: "",
            gender: ""
          }
        };
      }

      save = () => {
        console.log(this.state.values);
        this.employeeService
          .createEmployee(this.state.values)
          .then(result => {
            this.setState({ error: null });
          })
          .catch(err => {
            console.log(err);
            this.setState({ error: err });
          });
      };

      render() {
        console.log("reder : ", this.state.employee);

        return (
          <div>
            <Form>
              <Alert variant="primary">Employee</Alert>

              <Card style={{ width: "500px" }}>
                <Card.Header>Create Employee</Card.Header>
                <Card.Body>
                  <EmployeeForm employee={this.state.employee} />
                  <Row>
                    <Col>
                      <Button variant="primary" type="button" onClick={this.save}>
                        Create
                      </Button>
                    </Col>
                  </Row>
                </Card.Body>
              </Card>
            </Form>
          </div>
        );
      }
    }

export default class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employee: {
        firstName: '',
        lastName: '',
        birthDate: '',
        hireDate: '',
        gender: '',
      },
    };
  }
  inputs = ['lastName'];
  render() {
    return (
      <div>
        {this.inputs.map(key => (
          <Child
            key={key}
            //value from this.state
            value={this.state.employee[key]}
            //will set this.state with value passed
            change={val =>
              this.setState({
                ...this.state,
                employee: {
                  ...this.state.employee,
                  [key]: val,
                },
              })
            }
          />
        ))}
      </div>
    );
  }
}

const Child = ({ change, value }) => {
  const onChange e => change(e.target.value);
  return (
    <input type="text" onChange={onChange} value={value} />
  );
};

import React from "react";
import { Alert, Form, Col, Row, Button, Card } from "react-bootstrap";
import EmployeeForm from "./EmployeeForm";
import EmployeeService from "./services/EmployeeService";

export default class CreateEmployee extends React.Component {
  constructor() {
    super();
    this.employeeService = new EmployeeService();
    this.state = {
      employee: {
        firstName: "",
        lastName: "",
        birthDate: "",
        hireDate: "",
        gender: ""
      }
    };
  }

  // Create handleChange here and pass it to EmployeeForm as props
  // Use setState instead of mutating state
  handleChange = e => {
    this.setState({employee: {[e.target.id]: e.target.value}})
  };

  save = () => {
    console.log(this.state.values);
    this.employeeService
      .createEmployee(this.state.values)
      .then(result => {
        this.setState({ error: null });
      })
      .catch(err => {
        console.log(err);
        this.setState({ error: err });
      });
  };

  render() {
    console.log("reder : ", this.state.employee);

    return (
      <div>
        <Form>
          <Alert variant="primary">Employee</Alert>

          <Card style={{ width: "500px" }}>
            <Card.Header>Create Employee</Card.Header>
            <Card.Body>
              <EmployeeForm handleChange={this.handleChange} employee={this.state.employee} />
              <Row>
                <Col>
                  <Button variant="primary" type="button" onClick={this.save}>
                    Create
                  </Button>
                </Col>
              </Row>
            </Card.Body>
          </Card>
        </Form>
      </div>
    );
  }
}