reactjs 将代码移动到函数后,React js输入不起作用

um6iljoc  于 2023-03-12  发布在  React
关注(0)|答案(2)|浏览(112)

输入没有问题,但是我需要将输入代码移到一个函数中。现在我只能在输入值中键入一个单词。不确定解决这个问题的方法是什么。我的排序函数也有类似的问题。
这是我的代码https://codesandbox.io/s/sweet-murdock-5uqfxs?file=/src/App.js的链接
我为输入创建了另一个函数,但仍然没有运气。

efzxgjgh

efzxgjgh1#

这是因为你在App组件内部定义了MyInput组件,所以在每次重新渲染App时,它都会创建一个新的MyInput组件,这样它就会失去焦点,你需要重新聚焦输入。
App之外定义MyInput组件以使其稳定将解决这些问题。您必须通过props传递所需的值和处理程序。
通常,由于这类问题,在其他组件内部定义组件是一种不好的模式。

nwlqm0z1

nwlqm0z12#

你的代码很脏,读起来很痛苦。
你几乎在任何地方都使用了不必要的 prop 。你的应用程序基本上是一个购物清单。应用程序创建和读取数据-只有两个功能。
此外,您还不必要地将基本应用程序组合成主应用程序组件中的多个组件。因此,您的inputValue状态无法准确Map到MyInput中的username
建议:组织你的状态变量并减少组件的组成。
我不想无礼,但是你的代码没有组织,读起来很痛苦。

相关问题