🧐[在input中的onchange事件中使用useModel，每次输入都会导致光标跳到最后]

[whugarra]

🧐 问题描述 | Problem description

[在input中的onchange事件中使用useModel，每次输入都会导致光标跳到最后]

💻 示例代码 | Sample code

model/demo.ts
import { useCallback, useState } from 'react';

export default () => {
const [value, setValue] = useState("");
const propUpdate = useCallback((val) => {
setValue(val);}, []);

return { value, propUpdate }
}

/View.tsx
const { value, propUpdate } = useModel('demo');
<Input size="small" value={value} onChange={(e) => propUpdate("test")}>

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

🧐 问题分析 | Problem analysis

根据用户的描述，使用 useModel 在 input 的 onChange 事件中处理输入时，每次输入都会导致光标跳到最后。这可能是由于在每次输入时，value 的更新导致了重新渲染组件，从而导致光标移动到了最后。

🚀 解决方案 | Solution

一种解决方案是使用 useRef 来存储 input 的引用，并在每次更新 value 时恢复光标位置。以下是一个可能的解决方案：

import React, { useCallback, useEffect, useRef, useState } from 'react';

const MyComponent = () => {
  const [value, setValue] = useState("");
  const inputRef = useRef(null);

  const handleChange = useCallback((e) => {
    setValue(e.target.value);
  }, []);

  // 恢复光标位置
  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.selectionStart = value.length;
      inputRef.current.selectionEnd = value.length;
    }
  }, [value]);

  return (
    <input
      ref={inputRef}
      value={value}
      onChange={handleChange}
      // 其他属性
    />
  );
};

export default MyComponent;

这里我们使用 useRef 来创建一个 inputRef 的引用，并将其赋值给 input 的 ref 属性。在 useEffect 中，我们使用 inputRef.current 来获取到 input 元素，并在每次 value 更新后，将光标位置重置到最后。

此外，还可以使用其他解决方案，如使用第三方库 react-input-autosize 来解决光标跳到最后的问题。

📚 参考文档 | Reference documentation

• React文档 - useRef
• React文档 - useEffect

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

问题的解决方案：

• 当我设置了 Input/Select 等的 value 时它就无法修改了。

尝试使用 onChange 来改变 value，请参考 React 的文档。

const { value, propUpdate } = useModel('demo');
<Input 
  size="small" 
  value={value} 
  onChange={(e) => propUpdate(e.target.value)}
></Input>

这样每次输入的时候，都会通过 propUpdate 修改 value 的值，保持最新的输入状态。光标也不会跳到最后了。