html – 将动态表单建模为React组件

概述如何将动态表单建模为React组件？ 例如,我想创建一个如下图所示的表单： >我如何将其建模为React组件？ >如何为该组件添加动态性？例如,单击“添加”按钮会创建另一个空文本框,并将其放在其他已经渲染的文本框的正下方(如下图所示). 有人可以帮我处理下面表格的代码吗？ 不同之处在于,除了表单值的状态之外,我们还需要处理表单形状/结构的状态. 如果通过遍历某个状态对象来渲染输入,即表示形式的形状 如何将动态表单建模为React组件？

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

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

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

解决方法 不同之处在于,除了表单值的状态之外,我们还需要处理表单形状/结构的状态.

如果通过遍历某个状态对象来渲染输入,即表示形式的形状,则新输入只是此状态对象中的新条目.您可以通过管理该状态对象轻松地在表单上添加或删除输入字段.例如.你可以写这样的东西(伪反应代码)：

// inputs state of math and algorithmsconst state = { math: [obj1,obj2],algorithms: [obj1,obj2] } // obj ~= {ID,value}// render math inputsconst mathMarkup = state.math.map(obj => <input value={obj.value} onChange={...} />)// add handler for math fIEldconst addMath = () => setState(prevstate => ({ math: [...prevstate.math,newObj]}))

这是这种形式的例子 – codesandbox.它不是100％在你的屏幕上,但这个想法应该是可以理解的.由于您的表单有一些不明确的要求,我只实现了前两个部分,因此您可以掌握这个想法.并且,没有风格：耸肩：

此外,您可以提取renderXyz方法来分离组件,并改善状态形状以满足您的需求.

总结

以上是内存溢出为你收集整理的html – 将动态表单建模为React组件全部内容，希望文章能够帮你解决html – 将动态表单建模为React组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。