英文:
Input field upon every input goes out of focus
问题
错误发生在两种情况下：
-
如果输入具有 onChange
-
如果输入位于另一页上调用的组件中
例如：
在 Page1.js 中我们有：
return <div> <Page2 /> </div>
在 Page2.js 中我们有：
const [customState, customSetState] = useState({
customText: ''
});
return <input value={customState.customText} onChange={setCustomStateText} />
function setCustomStateText(event) {
customSetState({
...customState,
customText: event.target.value
});
}
当 Page1 不调用 Page2，而只包含正常的输入元素时，错误消失，当我们移除 onChange 时，错误也消失。
有任何想法吗？
英文:
Error occurs under two circumstances:
-
If input has onChange
-
If input is within component that is called on another page
For example:
On Page1.js we have:
return <div> <Page2 /> </div>
On Page2.js we have:
const [customState, customSetState] = useState({
customText: ''
});
return <input value={customState.customText} onChange={setCustomStateText} />
function setCustomStateText(event) {
customSetState({
...customState,
customText: event.target.value
});
}
Error goes away when Page1 is not calling Page2 but just having normal input element, it also goes away once we remove onChange.
Any ideas?
答案1
得分: 1
我猜测您在每次渲染时的输入已经被重新创建。
如果您使用useRef钩子，如文档所述：
> useRef返回一个可变的ref对象，其.current属性初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期内保持不变。
像这样：
const inputEl = useRef(null);
const [customState, customSetState] = useState({
customText: ''
});
return <input ref={inputEl} value={customState.customText} onChange={setCustomStateText} />
我看到的另一个可能会引起问题的问题是不改变先前的状态。我建议使用以下方式：
function setCustomStateText(event) {
customSetState(prevState => {
return {
...prevState,
customText: event.target.value
}
});
}
正如文档所述关于setState()：
> setState()不总是立即更新组件。它可能会批处理或延迟更新，这使得在调用setState()后立即读取this.state可能会导致潜在的问题。
希望这有所帮助！
英文:
I guess your input on each render has been recreated.
What about if you use useRef hook, as the documentation states:
> useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component.
Like the following:
const inputEl = useRef(null);
const [customState, customSetState] = useState({
customText: ''
});
return <input ref={inputEl} value={customState.customText} onChange={setCustomStateText} />
The other issue what I see there which can cause further issues is not mutating the previous state. I suggest to use as the following:
function setCustomStateText(event) {
customSetState(prevState => {
return {
...prevState,
customText: event.target.value
}
});
}
As the documentation states about setState():
> setState() does not always immediately update the component. It may batch or defer the update until later. This makes reading this.state right after calling setState() a potential pitfall.
I hope that helps!
答案2
得分: 0
快速解决方案是使用 props.children，不是最佳解决方案，但它可以工作。如果有人找到更好的解决方案，请告诉我。如果您在组件内部设置条件渲染，请使用 props.children 在另一个文件中设置渲染。
英文:
Quick solution is with props.children, not the best solution, but it works. If anyone finds better solution let me know. If you set conditional rendering inside component use props.children to set render within another file.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论