自上而下渲染 - 如何在预先填充的输入字段中解决状态

Question

场景：我有一个反应应用程序，其状态为flux store（异步加载），将数据传递给Root组件，Root组件将数据传递给子组件，依此类推。

now：文本输入字段，嵌套在节点树的深处，在propIn的getInitialState中完成初始值（prop已传递下来），on onChange事件将其状态设置为typed value。到目前为止书的例子。 现在让我们提交＆＃39;表单，操作被触发，ajax调用已经完成，数据返回更改，传递到将事件发送到Root组件的存储，节点树再次重新呈现，但当然getInitialState不会再次触发，并且字段仍然有最后输入的值。 我不认为我想在每一次击键时启动整个action-store-root-children-reRender循环，对吗？

问题：如何让输入的状态从传递的道具（商店一个）中恢复过来

思考：嗯，我实际上可以通过设置商店标记来确定何时从ROOT开始重新渲染＃;＆＃39;在ROOT的componentWillUpdate（）中然后将其设置回componentDidUpdate（）中 - 然后所有子组件都可以知道它是ROOT意图重新呈现还是只是父母非商店发起的更改。

Answer 1

首先，你所做的是一个反模式。国家不应该被设置为道具。你的道具不应该是州。

React文档非常清楚更新道具。 查看此链接：https://facebook.github.io/react/docs/component-specs.html

  

componentWillReceiveProps（object nextProps）

您应该考虑实施此生命周期方法，它将帮助您了解道具更改。

但请考虑分离道具和状态 - React Framework有两个原因。但这是一个不同的主题。

EDIT1： 如果你想更新你的商店状态，那么调用一个引用相应商店的flux动作，并将props作为有效负载传递到上面的生命周期方法中。

希望这会有所帮助。

Answer 2

将表单的值保留在商店中，并且根本不使用任何本地组件state。编辑表单时，触发更新商店并重新呈现应用程序的操作。