时间戳

首页 > 解决方案 > React 中动态构建和深度嵌套的表单

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

问题描述

几天来，我一直试图为我的问题找到解决方案，但没有运气。我从构建嵌套表单的后端获取 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"] }
    ]
  }
];

数组中的fieldsets 需要一个接一个地渲染。每个fieldset都有多个input不同类型的字段。输入字段也有一个选定的值（values数组）。

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

想到的一种解决方案是为叶节点（实际输入组件）提供更新顶层状态的功能。

但是，如果您考虑/尝试一下，您会发现这些功能很难创建并传递给正确的组件。

我该如何解决这个问题？任何帮助是极大的赞赏。

标签： javascriptreactjs

解决方案

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

假设我们创建了一个组件<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} />;
}

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

推荐阅读