Question

我需要一些帮助来设计React app singe page app。

我想展示并让用户编辑（通过表单输入）一个复杂的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>

使用更改事件手动处理每个字段似乎过于复杂，令人厌烦（每个组件有几十个字段），并且容易出错...而且我甚至不确定如何将更改传播到顶部 - 来自内部的等级成分。

有哪些替代方案？

Answer 1

官方指南：Thinking in React

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

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

链接指南的第5部分使用回调来传播链中的数据（即person - ＆gt;编辑器）。

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

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

1 个答案: