我们的数据库经常更新用户正在实时处理的表单/文件/输入字段(例如，后台作业使用新信息更新字段(。
表格就在他们眼前更新，他们很喜欢。
然而，如果他们在更新运行时输入特定的输入字段，那么他们当时输入的内容都会被覆盖，这很烦人。
我们宁愿用户所写的内容优先，并覆盖数据库向上推到输入字段中的内容。
我希望的一个解决方案是临时存储用户键入的内容，以防发生更新，这样我们就可以在用户完成键入后将本地状态放回输入字段。这将覆盖数据库发送的任何内容。
你会怎么做？
是否有可能以某种方式跟踪用户正在触摸的输入字段，并保护该特定输入字段不受db字段的影响，而不受用户当前未修改的其他字段的影响？
例如：(我在这里混合了伪代码(：
<Input
disabled={!canEdit}
value={
if(userIsTypingHere){
currentLocalInput
}
else{dbData?.docTitle
}
placeholder="Title (mandatory)"
fontSize={'xl'}
isInvalid={!dbData?.title}
onChange={(e) =>
setOurDoc({
...dbData,
docTitle: e.target.value,
})
}
/>
<Input
disabled={!canEdit}
value={
if(userIsTypingHere){
currentLocalInput
}
else{dbData?.docDecription
}
placeholder="Title (mandatory)"
fontSize={'xl'}
isInvalid={!dbData?.description}
onChange={(e) =>
setOurDoc({
...dbData,
docTitle: e.target.value,
})
}
/>
另一种选择是存储来自后端的状态、临时保持状态和呈现给用户的最终状态。但这可能会很快变得混乱，我宁愿使用上面的解决方案。
想法？**额外信息：**我们正在使用：NextJs查克拉UI
旁注：完成后，如果用户输入覆盖数据库更新，则此新输入将自动保存到数据库，因此将保持持久性。
看起来'userIsTypingHere'应该像脏标志一样——在用户开始键入时将其设置为true——在更改时，在输入模糊时，或者在几秒钟后，或者在保存时，将其设置回false——这取决于您的业务案例。您可能需要一个受控输入的状态。
如果userIsTypingHere为false，则可以在useEffect中更新输入。
我看到的是这样的：
const [userIsTypingHere, setUserIsTypingHere] = useState(false);
const [currentLocalInput, setCurrentLocalInput] = useState(false);
useEffect(() => {
if(!userIsTypingHere) setCurrentLocalInput(dbValue);
}, [dbValue]);
return (
<Input
value={userIsTypingHere ? currentLocalInput : dbValue}
onChange={(e) => {setUserIsTypingHere(true); setCurrentLocalInput(e.target.value);}}
onBlur={(e) => {setUserIsTypingHere(false); doStuff(); }} // save to backend or manage conflict
/>