为什么我不能在表单输入（子组件）和 React useState Hook（父组件）之间共享信息？

Question

我正在使用 React 做一个多步骤表单，我希望当用户点击“下一步”按钮时，他/她可以转到下一个表单，将信息保存在父组件 useState Hook 中，如果用户将其保留在输入中决定回去。 Switch 有 8 个案例，但为了简单起见，我只留下了 1 个。结构看起来像这样（代码后的问题）：

<MainForm /> |_ <UserInfo /> |_ Another 7 childs

MainForm.js

import React, { useState } from "react";

import UserInfo from "../components/Shared/UserInfo";
//import ... more childs ...
import {
  BackButton,
  NextButton,
  SendButton,
} from "../components/Shared/Buttons";

const BDMForm = (props) => {
  const [step, setStep] = useState(1);
  const [datos, setDatos] = useState({
    fullName: "",
    email: "",
    phoneNumber: "",
    linkedIn: "",
    city: "",
    experience: "",
  });

  const handleChange = (e) => {
    setDatos({ ...datos, [e.target.name]: e.target.value });
  };
  function renderComponent(step) {
    let currentStep = step;

    switch (currentStep) {
      case 1:
        return <UserInfo handleChange={handleChange} datos={datos.fullName} />;

      // 7 more cases
}
  return (
    <form>
      {renderComponent(step)}
      <div className="button-container">
        <BackButton step={step} setStep={setStep} />
        {step >= 7 ? null : <NextButton step={step} setStep={setStep} />}
        {step === 7 ? <SendButton /> : null}
      </div>
    </form>
  );
};

export default MainForm;

UserInfo.js

import React from "react";

  return (
        <div className="card-container">
          <label>
            Nombre y Apellido<span> *</span>
          </label>
          <input
            type="text"
            name="fullName"
            value={props.datos}
            onChange={props.handleChange}
          />
        </div>
      </div>
  );
};

export default UserInfo;

我有两个问题：

1) 当我在 fullName 输入 (UserInfo.js) 上写一些东西时，我认为 React 正在使用默认值 ("") 更新组件，所以我不能在上面写任何东西。 预期行为： 用户可以写入和输入应该保存在父组件的 datos.fullName 中。 当用户按下一步或返回时，书面信息仍然存在。

2) 我的方法可以吗？我是否应该将所有子数据保存在父组件中，然后稍后从另一个子组件访问它（例如 Confirm.js 或用户可以在发送之前读取信息的地方）。我尝试学习 Context API 但仍然不明白如何实现它????

Answer 1

像这样更改您的 handleChange 函数：

  const handleChange = (e) => {
    const fieldName = e.target.name;
    const fieldValue = e.target.value;
    setDatos(prevDatos => ({ ...prevDatos, [fieldName]: fieldValue }));
  };

当新的状态依赖于之前的状态时，你必须使用函数式的方式来更新状态。

关于你的第二个问题，是的，你的方法很好。

最后，我会在定义函数时保持一定的一致性。我指的是handleChange 和renderComponent 函数。