是JavaScript'；s.setSelectionRange（）与React挂钩不兼容？

这个问题修正了r/JS上的一个问题

我有一个受控的

输入

，我可以通过编程更改其值。我想使用以保持插入符号在输入中的位置

除非这不起作用：每次重新渲染默认情况下会自动将选择范围设置为输入的末尾

此问题如图所示，原始问题的作者用10ms

setTimeout（）延迟解决了此问题

如何在不使用与挂钩不兼容的
setTimeout（）
或的情况下实现这一点？
我看到的基本问题是
.setSelectionRange（）
在模板中被内联使用，并且应该包装在
useffect（）
中

我还将拉出选择处理程序，只是为了更整洁一点（根据
handleDomainChange（）
和
handleSubmit（）
）

使用效果进行选择更新

const[selection，setSelection]=useState（）
useffect（（）=>{
如果（！selection）返回；//禁止启动时运行
常量{start，end}=选择；
inputEl.current.focus（）；
输入电流设置选择范围（开始、结束）；
}，[选择]）
const handleSelection=（e）=>{
const start=inputEl.current.selectionStart；
const end=inputEl.current.selectionEnd；
…//选择处理程序中的其他代码与原始代码相同
//inputEl.current.focus（）；
////下面这行不行！
////inputEl.current.setSelectionRange（start+e.native.length，end+e.native.length）
////这一个是，但不是很好的做法。。
//设置超时(
//   () =>
//inputEl.current.setSelectionRange(
//开始+e.native.length，
//end+e.native.length
//     ),
//   10
// );
setSelection（{start:start+e.native.length，end:end+e.native.length}）；
}

模板更改为call handleSelection（）

{
无把手选举（活动）
}}
/>


原始代码供参考

{
const start=inputEl.current.selectionStart；
const end=inputEl.current.selectionEnd；
//const result=domainString.substring（0，start）+e.native+domainString.substring（end，domainString.length）
setDomainString(
prevString=>
prevString.substring（0，开始）+
e、 土生土长的+
prevString.substring（结束，prevString.length）
);
setDomainsArray(
domainEndings.map(
结束=>
domainString.substring（0，开始）+
e、 土生土长的+
domainString.substring（结束，domainString.length）+
结束
)
);
inputEl.current.focus（）；
//下面这行不行！
//inputEl.current.setSelectionRange（开始+e.native.length，结束+e.native.length）
//这一个是，但不是好的做法。。
设置超时(
() =>
inputEl.current.setSelectionRange(
开始+e.native.length，
end+e.native.length
),
10
);
}}
/>