需要一些关于使用 React 的动态表单的建议答案

【问题标题】：Need some suggestions for a dynamic form using React需要一些关于使用 React 的动态表单的建议
【发布时间】：2020-01-11 02:13:58
【问题描述】：

我正在构建一个企业级应用程序，我需要一些处理动态表单的技巧和建议。

表单的字段是完全动态的，并且每个用户的字段都不同。我在一个名为 renderUiType.js 的文件上循环遍历每个字段（字段来自 API 调用），并根据名为 uitype 的字段属性，我们呈现不同的输入。例如如果 uitype===1{render TextField}, if uitype===2{ render Checkbox} 等等...

到目前为止，显示部分是正确的，但现在我想保存渲染的每个字段的值并将它们全部放在一个对象中，以便我可以进行 POST API 调用

所以我的问题是，我该怎么做？我应该在主文件 renderUiType.js 中为每个表单元素创建一个 onChange 处理函数，然后将其与 props 一起传递给表单元素组件，还是应该使用 Redux？

欢迎任何建议/文章或任何内容。谢谢

文件夹结构如下图所示（以防有助于理解我的问题）

【问题讨论】：

我觉得，在您的 renderUiType.js 中，您将为您绑定的每个表单控件管理一个状态。这些状态对于文本框、下拉列表、复选框和单选来说会有所不同，这些情况您必须在 renderUiType.js 中处理
你可以学习这个库github.com/kiho/react-form-builder

标签： javascript reactjs forms redux

【解决方案1】：

您可以使用一个回调函数并在每个onChange 组件特定的处理程序中使用它。如果你想隐藏在唯一的keys/id 下，你可以拥有Form 状态的所有东西，所以你不需要 Redux。 f.e.

if (uitype===1)
{render <TextField  value={this.state[fieldId]} onChange={this.onChange}/>}
if (uitype===2)
{ render <Checkbox value={this.state[fieldId]} onChange={this.onChange}/>}

或简化：

const getComponentByUIType = (uiType) => {
  switch(uiType) {
    case 1: return TextField
    case 2: return Checkbox
  }
}
// ...
onChange = fieldId => value => this.setState(state => ({fieldId: value}))
//...
render() {
   getComponentByUIType(uiType).map(Component => <Component value={this.state[fieldId]} onChange = {this.onChange(fieldId)} />
}

【讨论】：

这似乎是对的。而在表单元素组件中，当用户更改输入时，我只需从父组件调用 onChange 函数，对吧？

【解决方案2】：

除非您需要在表单外的某处访问此表单的状态，否则不需要为此使用 Redux。如果您只需要表单信息来进行 POST，我会将所有数据保存在一个组件的状态中。

只需使用 IP 提供的唯一 ID（您将用于 POST 的 ID）来构建该状态对象。每个字段都会有一个onChange 来更新主表单组件的状态，然后将来自该状态的相同值作为道具传递给每个字段。

【讨论】：