reactjs - React 控制输入光标跳转

Question

我正在使用 React 并格式化了一个受控输入字段，当我写一些数字并在输入字段外部单击时，它可以正常工作。但是，当我想要编辑输入时，光标会跳到输入字段中值的前面。这仅发生在 IE 中，而不会发生在例如 Chrome 。我发现有些程序员的光标会跳到值的后面。所以我认为我的光标跳到前面的原因是因为该值在输入字段中向右对齐而不是向左对齐。这是一个场景:

我的第一个输入是1000然后我想编辑成10003，但是结果是31000

有办法控制光标不跳转吗？

Answer 1

这是 <input/> 的直接替代品标签。这是一个简单的功能组件，使用钩子(Hook)来保存和恢复光标位置:

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

const ControlledInput = (props) => {
   const { value, onChange, ...rest } = props;
   const [cursor, setCursor] = useState(null);
   const ref = useRef(null);

   useEffect(() => {
      const input = ref.current;
      if (input) input.setSelectionRange(cursor, cursor);
   }, [ref, cursor, value]);

   const handleChange = (e) => {
      setCursor(e.target.selectionStart);
      onChange && onChange(e);
   };

   return <input ref={ref} value={value} onChange={handleChange} {...rest} />;
};

export default ControlledInput;