React / JSX - 如何使用仅在提交时更新其父级的道具提供的初始内容对可编辑输入进行编码?

时间:2017-02-23 16:16:01

标签: javascript reactjs react-jsx

我发现保持本地状态的所有示例都不能为输入提供初始值。在我的例子中,父组件从服务器检索字段并将它们传递给我的输入表单,其中字段应是可编辑的。但我不希望将每个更改传递回层次结构,如果我可以避免它,而只是在提交表单时(通过按钮或按Enter键)

更新:用法如下。想象一下todo列表。顶级保存列表和详细信息组件。当我点击列表时,细节应该更新以显示所选的待办事项文本。该文字应该是可编辑的。

所以到目前为止,详细信息组件的输入初始状态是列表中的文本,这些文本在props中传递下来。当选择列表中的不同待办事项时,它需要更改。另一方面,我应该能够编辑它,当提交触发时,todo文本应该通过回调道具传回。

所以我必须保持本地状态来收集输入,但我希望用列表中现有的待办事项文本初始化该状态。如果我使用不受控制的表单的Facebook示例,我发现当我切换到列表中的不同待办事项时,编辑的文本仍会显示。也许我做错了或者这是一个概念问题?使用受控输入初始化构造函数中的状态也不起作用,因为构造函数只被调用一次(而不是每次重新渲染)!

2 个答案:

答案 0 :(得分:2)

我通过使用生命周期方法componentWillReceiveProps(nextprops)解决了这个问题,我可以将状态设置为新的道具。每次重新渲染变得必要时都会调用此方法 - 在我的情况下,因为父级更改了子级道具。 见https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

答案 1 :(得分:0)

您可以根据从父项传入的属性设置初始状态,然后在使用表单提交提交之前在组件中编辑该状态