javascript - React 中的动态构造和深度嵌套表单

Question

几天来，我一直在尝试为我的问题找到解决方案，但没有成功。我从构建嵌套表单的后端获取 JSON 数据。表单的结构是动态的(取决于来自后端的内容)并且其值需要预先填充(这包含在数据中)。

给你一个想法，数据的格式可以是这样的:

export const data = [
  {
    name: "fieldset 1",
    fields: [
      { type: "text", inputs: null, values: ["hi"] },
      { type: "radio", inputs: ["1", "2", "3"], values: ["1"] }
    ]
  },
  {
    name: "fieldset 2",
    fields: [
      { type: "text", inputs: null, values: ["hi"] },
      { type: "radio", inputs: ["1", "2", "3"], values: ["1"] }
    ]
  }
];

数组中的fieldset需要依次渲染。每个 fieldset 都有多个不同类型的 input 字段。输入字段还选择了一个值(values 数组)。

用正确的值渲染它很容易。 困难的是当用户按下一个按钮时，修改后的值需要被聚合并发送回后端。

想到的一个解决方案是为叶节点(实际输入组件)提供一个函数来更新顶层的状态。

但是，如果您仔细考虑/尝试一下，您会发现此类函数很难创建并传递给正确的组件。

我该如何解决这个问题？非常感谢任何帮助。

Answer 1

对于这个问题，我有一个潜在的解决方案，它涉及为每个输入(叶节点)保持本地状态，然后在值更改时直接改变数据。让您了解我的意思:

假设我们创建了一个组件 <Form data={data} />并将所需的数据传递给它。

然后在树下的某个地方，会有一个像这样的组件，例如:

function InputField({ field }) {
  const [value, setValue] = useState(field.values[0]);

  function handleChange(e) {
    // mutate data directly - this doesn't cause a rerender
    // but mutates the data since we are accessing it by reference
    field.values[0] = e.target.value;
    // setState locally to cause rerender
    setValue(e.target.value);
  }

  return <input onChange={handleChange} type="text" value={value} />;
}

然而，同事们对这种方法并不满意，我也是。