将动态表单建模为React组件

Question

如何将动态表单建模为React组件？

例如,我想创建一个如下图所示的表单:

1. 我如何将其建模为React组件？
2. 如何为该组件添加动态性？例如,单击"+添加"按钮会创建另一个空文本框,并将其放在其他已经渲染的文本框的正下方(如下图所示).

有人可以帮我处理下面表格的代码吗？

Answer 1

不同之处在于，除了表单值的状态之外，我们还需要处理表单形状/结构的状态。

如果通过遍历某个代表表单形状的状态对象来呈现输入，则新输入只是该状态对象中的一个新条目。您可以通过管理该状态对象轻松添加或删除表单上的输入字段。例如你可以写这样的东西（伪反应代码）：

// inputs state of math and algorithms
const state = { math: [obj1, obj2], algorithms: [obj1, obj2] } // obj ~= {id, value}
// render math inputs
const mathMarkup = state.math.map(obj => <input value={obj.value} onChange={...} />)
// add handler for math field
const addMath = () => setState(prevState => ({ math: [...prevState.math, newObj]}))

这是这种形式的示例-codesandbox。它并不像屏幕上那样 100%，但这个想法应该是可以理解的。由于你的表单上有一些不明确的要求，我只实现了前两部分，所以你可以掌握这个想法。而且，没有样式：耸肩：

此外，您还可以提取renderXyz方法来分离组件，并改进状态形状以满足您的需求。