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} />;
}

但是同事对此方法不满意，我也不是。

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

1 个答案: