React/JSX - 如何使用通过 props 提供的初始内容编写可编辑输入，仅在提交时更新其父项？
React/JSX - how to code an editable input with initial content provided via props that only updates its parent when submitted?
我发现的所有保持本地状态的示例都不能为输入提供初始值。在我的例子中，父组件从服务器检索字段并将这些传递到我的输入表单，其中字段应是可编辑的。但是，如果可以避免，我不想将每个更改传递回层次结构，而是仅在提交表单时（通过按钮或按回车键）
更新：用法如下。想象一下待办事项列表。顶层包含列表和详细信息组件。当我单击列表时，详细信息应更新以显示选定的待办事项文本。该文本应该是可编辑的。
就细节组件而言，输入的初始状态是列表中在道具中传递下来的文本。选择列表中的不同待办事项时，它需要更改。另一方面，我应该能够编辑它，并且当触发提交时，应该通过回调道具将待办事项文本传回。
所以我必须保留本地状态来收集输入，但我希望使用列表中现有的待办事项文本来初始化该状态。如果我使用不受控制的表单的 Facebook 示例，我发现当我切换到列表中的不同待办事项时，编辑的文本仍然显示。也许我做错了或者这是一个概念问题？在构造函数中使用受控输入初始化状态也不起作用，因为构造函数只被调用一次（不是在每次重新渲染时）！
您可以根据从父级传入的 属性 设置初始状态，然后在提交表单提交之前在组件中编辑该状态
我通过使用生命周期方法 componentWillReceiveProps(nextprops) 解决了这个问题，我可以在其中将状态设置为新的道具。每次需要 re-render 时都会调用此方法 - 在我的例子中是因为 parent 改变了孩子的道具。
参见 https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops
我发现的所有保持本地状态的示例都不能为输入提供初始值。在我的例子中，父组件从服务器检索字段并将这些传递到我的输入表单，其中字段应是可编辑的。但是，如果可以避免，我不想将每个更改传递回层次结构，而是仅在提交表单时（通过按钮或按回车键）
更新：用法如下。想象一下待办事项列表。顶层包含列表和详细信息组件。当我单击列表时，详细信息应更新以显示选定的待办事项文本。该文本应该是可编辑的。
就细节组件而言，输入的初始状态是列表中在道具中传递下来的文本。选择列表中的不同待办事项时，它需要更改。另一方面，我应该能够编辑它，并且当触发提交时，应该通过回调道具将待办事项文本传回。
所以我必须保留本地状态来收集输入，但我希望使用列表中现有的待办事项文本来初始化该状态。如果我使用不受控制的表单的 Facebook 示例，我发现当我切换到列表中的不同待办事项时，编辑的文本仍然显示。也许我做错了或者这是一个概念问题？在构造函数中使用受控输入初始化状态也不起作用，因为构造函数只被调用一次（不是在每次重新渲染时）！
您可以根据从父级传入的 属性 设置初始状态，然后在提交表单提交之前在组件中编辑该状态
我通过使用生命周期方法 componentWillReceiveProps(nextprops) 解决了这个问题，我可以在其中将状态设置为新的道具。每次需要 re-render 时都会调用此方法 - 在我的例子中是因为 parent 改变了孩子的道具。 参见 https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops