React - 向下传递状态

Question

我正在用 React 构建一个简历创建者。我有一个表单，一个预览组件，它们最接近的父组件是 Main。我想要实现的是，当用户在表单字段中输入时，右侧的预览字段会使用表单中的数据自动更新，但我无法让它工作。这是我在 React 中的第一个项目，我不能使用钩子或函数组件。我知道我做错了什么，但无法确定是什么。

主要组件

import React, { Component } from "react";
import Form from "./form/Form";
import Preview from "./formpreview/Preview";

class Main extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      title: "",
      address: "",
      phoneNum: "",
      email: "",
      description: "",
    };

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

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

  handleInputChange = (event) => {
    this.setState = {
      [event.target.name]: event.target.value,
    };
  };

  render() {
    const { firstName } = this.state;
    return (
      <div className="main">
        <Form
          submitForm={this.handleSubmit}
          changeInput={this.handleInputChange}
          firstName={firstName} lastName={lastName} title= 
          {title} address={address} phoneNum={phoneNum}
          email={email} description={description}
        />
        <Preview onChange={this.handleInputChange} 
         firstName={firstName} lastName={lastName} title= 
          {title} address={address} phoneNum={phoneNum}
          email={email} description={description}/>
      </div>
    );
  }
}

表单组件

import React, { Component } from "react";
import Personal from './buildingblocks/PersonalInfo';
import Experience from './buildingblocks/Experience';
import Education from './buildingblocks/Education';
import Buttons from './buildingblocks/FormButtons';

class Form extends Component {
   constructor(props) {
     super(props);
     this.state = {
       firstName: this.props.firstName,
       lastName: this.props.lastName,
       title: this.props.title,
       address: this.props.address,
       phoneNum: this.props.phoneNum,
       email: this.props.email,
       description: this.props.description
     }
   }

   submitForm = () => {
     this.props.submitForm()
   }

   changeInput = () => {
     this.props.changeInput()
   }

  
  render() {
    const {firstName, lastName, title, address, phoneNum, email, description} = this.state;
  
    return (
        <form className="cvForm" onSubmit={this.submitForm} onChange={this.changeInput}>
          <Personal firstName={firstName} lastName={lastName} title={title} address={address} phoneNum={phoneNum} email={email} description={description}/>

          <Experience />

          <Education />

          <Buttons />

        </form>
    );
  }
}

export default Form;

预览组件

import React, { Component } from "react";

class Preview extends Component {

  constructor(props) {
    super(props);
    this.state = {
      firstName: this.props.firstName,
      lastName: this.props.lastName,
      title: this.props.title,
      address: this.props.address,
      phoneNum: this.props.phoneNum,
      email: this.props.email,
      description: this.props.description
    }
  }

  submitForm = () => {
    this.props.submitForm()
  }

  changeInput = () => {
    this.props.changeInput()
  }


  render() {
    const {firstName, lastName, title, address, phoneNum, email, description} = this.state;

    return (
      <div className="cvPreview">
        <div className="gridItem nameItem">
          <h1>{firstName} </h1>
          <h3>Data engineer</h3>
        </div>
       
...
    );
  }
}

我没有包含所有预览组件，因为它只是元素。我知道我没有正确执行此操作，我收到 TypeError “无法读取未定义的属性'目标'”，我很确定我不应该多次定义这些道具，但在我尝试了一切之后，这是我的最后一枪。我卡住了，求助。

Answer 1

问题

主要

1. handleInputChange this.setState 应该是一个函数调用。

   handleInputChange = (event) => {
     const { name, value } = event.target;
     this.setState({
       [name]: value,
     });
   };
   

表格

1. 将传递的 props 存储在本地组件状态中是 anti-pattern 在 React 中，只需直接引用 prop 值即可。如果您将它们存储在 state 中，那么您必须还实现 componentDidUpdate，这样您就可以在 props 更新时更新保存在 state 中的本地缓存（即更新的 state在父母中），这只是额外的不必要的工作。

2. changeInput 处理程序不会消耗onChange 事件，也不会将其传递给this.props.changeInput，但与上一点类似，只需将this.props.changeInput 附加到需要它的元素。

3. 需要props.changeInput 回调的子组件是呈现输入的组件，即在您的情况下，它似乎是Personal 组件。

   class Form extends Component {
     render() {
       const {
         address,
         changeInput,
         description,
         email,
         firstName,
         lastName,
         phoneNum,
         submitForm,
         title,
       } = this.props;
   
       return (
         <form className="cvForm" onSubmit={submitForm}>
           <Personal
             onChange={changeInput} // <-- pass change handler here
             firstName={firstName}
             lastName={lastName}
             title={title}
             address={address}
             phoneNum={phoneNum}
             email={email}
             description={description}
           />
   
           ...
         </form>
       );
     }
   }
   

预览

1. 所有与Form 组件相同的cmets。不要在本地存储传递的props，直接使用this.props.changeInput回调。由于这是预览版，它可能不需要onChange 处理程序。

   class Preview extends Component {
     render() {
       const {
         firstName,
         lastName,
         title,
         address,
         phoneNum,
         email,
         description
       } = this.props;
   
       return (
         <div className="cvPreview">
           <div className="gridItem nameItem">
             <h1>
               {title} {firstName} {lastName}
             </h1>
             <h3>Data engineer</h3>
             ... other fields
           </div>
         </div>
       );
     }
   }
   

演示