Reactjs react更新后输入光标移动到末尾

当我更新输入字段中的值时，光标移动到字段的末尾，但我希望它保持在原处。是什么导致了这个问题

<Input
  type="text"
  placeholder="test
  name="test"
  onChange={getOnChange(index)}
  value={testVal}/>

---

然后将其传递到父组件，在那里我通过Redux调度以更新状态。我可以看到状态正在被很好地更新，但问题是光标没有停留在位置上，并且总是移动到文本的末尾

当您通过代码动态更新输入值时，输入上的光标将被推到末尾，您这样做似乎是因为我可以看到

value={testVal}

：）

---

这是使用输入屏蔽的字段的常见问题

这是受控组件设计模式的缺点。我已经面对这个问题很长时间了，只是一直生活在这个问题中。但有一个想法，我想在业余时间尝试一下，但最终却从未尝试过。也许继续我的想法可以帮助您找到所需的解决方案？

<Input
  type="text"
  placeholder="test
  name="test"
  onChange={getOnChange(index)}
  value={testVal}
/>

★ 如果这占用了太多的时间，而你只想完成工作并运送你的应用程序，你可能需要考虑使用不受控制的组件设计模式。

< p>你有两个选项。

使其成为非受控输入（以后不能更改输入值）

使其成为一个适当控制的输入

这里缺少代码，所以我不能说问题出在哪里。

setState

不是问题：

如果在回调中使用

setState

，则React应保留光标位置

你能举一个更完整的例子吗？

---

testVal

是从组件外部操纵的属性吗？

我建议使用钩子来解决这个问题

const Component = ({ onChange }) => {
  const [text, setText] = useState("");
  const isInitialRun = useRef(false);

  useEffect(() => {
     if (isInitialRun.current) {
        onChange(text);
     } else {
        isInitialRun.current = true;
     }
  }, [text]);

  // or if you want to have a delay

  useEffect(() => {
     if (isInitialRun.current) {
         const timeoutId = setTimeout(() => onChange(text), 500);
         return () => clearTimeout(timeoutId);
    } else {
         isInitialRun.current = true;
    }
  }, [text])

  return (
    <Input
        type="text"
        placeholder="test
        name="test"
        onChange={setText}
        value={text}/>
 );
}

const组件=（{onChange}）=>{
const[text，setText]=useState（“”）；
const isInitialRun=useRef（false）；
useffect（（）=>{
如果（isInitialRun.current）{
onChange（文本）；
}否则{
isInitialRun.current=真；
}
}，[正文]；
//或者如果你想耽搁一下
useffect（（）=>{
如果（isInitialRun.current）{
const timeoutId=setTimeout（（）=>onChange（text），500）；
return（）=>clearTimeout（timeoutId）；
}否则{
isInitialRun.current=真；
}
}，[正文]）
返回(
如果光标跳到字段的末尾，通常意味着您的组件正在重新安装。这可能是因为每次更新父级中某个位置的值时，键属性都会发生更改，或者组件树中发生更改。如果看不到更多代码，很难判断。请防止重新安装，光标应停止跳变

使用此效果跟踪安装/卸载

useEffect(() => {
   console.log('mounted');

   return () => { 
       console.log('unmounted')
   }
}, []);

我也面临同样的问题，这是由于两个连续的setState语句造成的。更改为单个setState解决了问题。可能对某人有帮助

修复前的代码：

const onChange = (val) => {
 // Some processing here
 this.setState({firstName: val}, () => {
  this.updateParentNode(val)
 })
}

const updateParentNode = (val) => {
  this.setState({selectedPerson: {firstName: val}})
}

修复后的代码

const onChange = (val) => {
// Some processing here
  this.updateParentNode(val)
}

const updateParentNode = (val) => {
  this.setState({selectedPerson: {firstName: val}, firstName: val})
}

我发现这个问题有点难以想象，但在React github页面上有一个关于类似问题的讨论，也许会有所帮助：我已经看过并尝试过一些。
const onChange = (val) => {
 // Some processing here
 this.setState({firstName: val}, () => {
  this.updateParentNode(val)
 })
}

const updateParentNode = (val) => {
  this.setState({selectedPerson: {firstName: val}})
}

const onChange = (val) => {
// Some processing here
  this.updateParentNode(val)
}

const updateParentNode = (val) => {
  this.setState({selectedPerson: {firstName: val}, firstName: val})
}