Question

我需要用一种形式收集一个有点复杂的结构。我希望通过抽象化值集合并将数据发布到API来尽可能地灵活。所有这些“实体”都将通过POST请求单独保存。一个非常简化（未经测试）的表格如下所示：

  <form onSubmit={handleSubmit}>

    { /* Main person */ }
    <EntityWrapper entityType="person">
      <div className="input-wrapper">
        <label>Name</label>
        <EntityText entityKey="name" entityValue={values['name']} />
      </div>
      <div className="input-wrapper">
        <label>Age</label>
        <EntityDate entityKey="dob" entityValue={values['dob']} />
      </div>

      { /* Father of main person */ }
      <fieldset>
        <legend>Father</legend>
        <EntityWrapper entityType="person">
          <div className="input-wrapper">
            <label>Name</label>
            <EntityText entityKey="name" entityValue={values['name']} />
          </div>
          <div className="input-wrapper">
            <label>Age</label>
            <EntityDate entityKey="dob" entityValue={values['dob']} />
          </div>
        </EntityWrapper>
      </fieldset>

    </EntityWrapper>
  </form>

我希望<EntityWrapper>能够检测所有<Entity*>字段并提取它们的值，然后将自身保存到API。

我知道这个请求已经完成，尽管我想知道是否存在一种可以抽象化这些EntityWrappers的模式。这样可以简化同事的工作流程。当然，如果这是不可能的或真正的禁区，请告诉我。

我已经尝试在{children}中进行<EntityWrapper>的递归循环，但是不确定如何共享状态或从其值中读取。由于这些子项是不可变的，因此我也无法将onChange处理程序动态传递给它们。

如何收集可以以表格形式递归的复杂数据？

0 个答案: