gpt4 book ai didi

javascript - React/JSX - 如何使用 props 提供的初始内容编写可编辑输入,这些内容仅在提交时更新其父项?

转载 作者:行者123 更新时间:2023-11-30 15:29:40 25 4
gpt4 key购买 nike

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

更新:用法如下。想象一下待办事项列表。顶层包含列表和详细信息组件。当我单击列表时,详细信息应更新以显示选定的待办事项文本。该文本应该是可编辑的。

就细节组件而言,输入的初始状态是列表中在 Prop 中传递下来的文本。当选择列表中的不同待办事项时,它需要更改。另一方面,我应该能够编辑它,并且当触发提交时,应该通过回调 Prop 将待办事项文本传回。

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

最佳答案

我通过使用生命周期方法 componentWillReceiveProps(nextprops) 解决了这个问题,我可以在其中将状态设置为新的 Prop 。每次需要重新渲染时都会调用此方法——在我的例子中是因为 parent 改变了 child 的 Prop 。参见 https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

关于javascript - React/JSX - 如何使用 props 提供的初始内容编写可编辑输入,这些内容仅在提交时更新其父项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42420943/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com