每个输入上的输入字段都会失焦

Question

错误发生在两种情况下：

1. 如果输入已打开更改

2. 如果输入在另一个页面上调用的组件内

例如：

关于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，它也会消失。

有什么想法吗？

Answer 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 成为一个潜在的陷阱。

我希望这有所帮助！

Answer 2

快速的解决方案是使用props.children，不是最好的解决方案，但它有效。如果有人找到更好的解决方案，请告诉我。如果在组件内设置条件渲染，请使用 props.children 在另一个文件中设置渲染。