Javascript 如何使用React Js组合表单？[附片段]

我正在尝试用reactjs制作一个类似JSON格式的表单

index.js：

    const BasicDetails = ({ fieldChange }) => {
    
    ...
    
      const handleInputChange = (event) => {

        if (event.target.name === 'firstName') {
          setInputField({ ...inputField, firstName: event.target.value });
        } else {
          setInputField({ ...inputField, lastName: event.target.value });
        }
        fieldChange(inputField);
      };

要求：

我需要将这些输入组合成一个json格式

目前，我有不同文件中的基本详细信息和就业详细信息，因此如何将这两个文件/组件组合成一个完整的JSON

单击submit按钮index.js时需要JSON格式：

    const BasicDetails = ({ fieldChange }) => {
    
    ...
    
      const handleInputChange = (event) => {

        if (event.target.name === 'firstName') {
          setInputField({ ...inputField, firstName: event.target.value });
        } else {
          setInputField({ ...inputField, lastName: event.target.value });
        }
        fieldChange(inputField);
      };

查看下面的codesandbox，它在各个组件中具有输入字段的JSON格式。 我需要结合这些和显示提交按钮点击最终形式

代码沙盒：

注意：组件部分将继续增加，如我们将添加新组件，如技能、教育细节，此处未添加，但将在将来添加等，因此请提供相应的解决方案

提前向你表示衷心的感谢。

这是一份礼物。我只对基本细节进行了编码，但其余字段的原则相同：

您必须使用fieldChange道具处理从子组件到父组件的更改： 在父组件状态中保留更改： 另一个解决方案是，根据您的项目复杂性，这可以使用API来完成。这样做的目的是让多个组件共享您的状态

下面的代码将保存一个formValue，可在EmploymentDetails和BasicDetails组件上访问该formValue

//组件/表单_context.js 从“React”导入React，{useState}； export const FormContext=React.createContext； 导出函数FormProvider{children}{ 常量[formValue，setFormValue]=useState{ 基本细节：{ 名字：， 姓氏：， }, 公司详情：[ { 公司名称：， 名称：， }, ], }; 回来 {儿童} ; } 在基本细节中，您可以通过访问上面的formValue状态

//组件/basic_details.js 从“./form_context”导入{FormContext}； 常量基本细节==>{ const[value，setValue]=React.useContextFormContext；//此处 常量{basicDetails}=值； const handleInputChange=事件=>{ 常量{name，value}=event.target； setValueprev=>{ const basicDetails={…prev.basicDetails[name]：value}； 返回{…上一个，基本细节}； }; }; ... }; -还要注意我们是如何实现handleInputChange的，我们正在使用来自FormContext的setValue更新formValue

查看演示，并询问我是否需要澄清任何内容。阅读上下文文档

---

谢谢你的回答。。但是我期望的输出是基本细节和公司细节的组合，并在单击submit按钮时以单一json格式显示。另外，您的答案只是打印对象，就像{firstName:John，lastName:Doe}一样，而我期望的结果是{basicDetails:{firstName:John，lastName:Doe}这个解决方案现在对我来说很好。我现在就接受它，如果我有任何问题，我会回复你。谢谢。当然，请让我知道，np。很抱歉，尽管这是一个附加功能，但你能帮助我如何准确有效地分别向输入添加验证吗？当然，你想验证什么数据？谢谢。首先命名字段e、 姓氏和公司详细信息中的名称字段不应接受数字。然后，基本详细信息和公司详细信息中的姓氏、公司名称和名称输入字段必须为必填项。。

{
  "basicDetails": {
    "firstName": "John",
    "lastName": "Doe"
  },
  "companyDetails": [{
     "companyName": "xyz",
     "designation": "lmn"
   },
   {
     "companyName": "abc",
     "designation": "def"
   }
 ]
}

    const BasicDetails = ({ fieldChange }) => {
    
    ...
    
      const handleInputChange = (event) => {

        if (event.target.name === 'firstName') {
          setInputField({ ...inputField, firstName: event.target.value });
        } else {
          setInputField({ ...inputField, lastName: event.target.value });
        }
        fieldChange(inputField);
      };

    <BasicDetails fieldChange={(value) => setBasicDetails(value)} />