如何为复杂的 React 表单实现数据绑定答案

【问题标题】：How to implement data binding for a complex React form如何为复杂的 React 表单实现数据绑定
【发布时间】：2015-12-21 14:06:35
【问题描述】：

我需要一些帮助来设计 React 应用单页应用。

我想展示并让用户编辑（通过表单输入）一个复杂的 JSON 结构（具有已知形状），但我无法想象如何将生成的表单中的值绑定到数据结构。 JSON 结构是静态的，我只想让用户编辑值，而不是结构本身。

某些值取决于结构中的其他值（例如，在其他字段中指定字段的最大值）。数据具有嵌套结构，但它们不会 1:1 映射到我的组件（我不控制输入），这使得处理更加复杂（深层组件可以更改表面值）。

例如目的：

data.json

{
  "age": 12,
  "maxAge": 100,
  "name": {
    "first": "John",
    "last": "Doe"
  },
  "dogName": "Foo"
}

main.jsx

ReactDOM.render(<Editor data={data} />, mount);

Editor.jsx

<form>
  <Person data={props.data} />
  <Text defaultValue={props.data.dogName} />
  <h2>Settings:</h2>
  <Number defaultValue={props.data.maxAge} />
</form>

Person.jsx

<fieldset>
  <Text defaultValue={props.data.name.first} />
  <Text defaultValue={props.data.name.last} />
  <Number max={props.data.maxAge} defaultValue={props.data.age} />
</fieldset>

使用更改事件手动处理每个字段似乎太复杂、令人厌烦（每个组件有数十个字段）并且容易出错……而且我什至不确定如何将更改传播到顶部-内部组件的级别组件。

有什么选择？

【问题讨论】：

标签： forms data-binding architecture reactjs

【解决方案1】：

官方指南：Thinking in React

我相信上述指南可以帮助您解决所面临的一些挑战。

对于您的第一点：我会使用状态来保存信息。您可以进行“双向”数据绑定，让表单代表您的数据，而数据代表您的表单。您还可以使用某种形式的 onChange 函数调用来更新依赖于其他输入的数据。

链接指南的第 5 节介绍了使用回调将数据沿链（即人 -> 编辑器）传播。

如果这有可能演变成一个更大的项目，我建议查看 Flux 以获取以 React 作为视图的 MVC 类型前端。

【讨论】：