React 如何使输入光标停留在百分号前

问题描述

在输入时，我制作了一个显示百分比的输入框，例如1.1%（在开始时不接受00），但光标在输入过程中会移到末尾。有没有办法让光标保持在百分号前面？

function formatPercent(amount) {
  return amount + '%'
}

const [lendData, setLendData] = useState({
    lendValue: '',
    lendFee: '',
  })

function handleChange(e) {
    let { name, value } = e.target

    if (name == 'lendValue') {
      // prevent first character if it 0 and removing separator
      value = value.replace(/^0+|[^0-9]/g, '')

      setLendData((prev) => {
        return {
          ...prev,
          [name]: value,
        }
      })
    } else if (name == 'lendFee') {
      // prevent first character if it 0
      value = value.replace(/^0+|[^0-9,.]/g, '')
      console.log(value)
      setLendData((prev) => {
        return {
          ...prev,
          [name]: value,
        }
      })
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<input
  type='text'
  inputMode='decimal'
  name='lendFee'
  id='lendFee'
  placeholder='0%'
  value={
    lendData.lendFee ? formatPercent(lendData.lendFee) : ''
  }
  onChange={handleChange}
/>

解决方案

你可以尝试以下代码：

function formatPercent(amount) {
  return amount + '%';
}

function App() {
  const [lendData, setLendData] = useState({
    lendValue: '',
    lendFee: '',
  });

  const lendFeeInput = useRef(null);

  function handleChange(e) {
    let { name, value } = e.target;

    if (name === 'lendValue') {
      // prevent first character if it 0 and removing separator
      value = value.replace(/^0+|[^0-9]/g, '');

      setLendData((prev) => {
        return {
          ...prev,
          [name]: value,
        };
      });
    } else if (name === 'lendFee') {
      const cursorPosition = e.target.selectionStart;

      // prevent first character if it 0
      value = value.replace(/^0+|[^0-9,.]/g, '');

      setLendData((prev) => {
        return {
          ...prev,
          [name]: value,
        };
      });

      // Restoring cursor position
      setTimeout(() => {
        lendFeeInput.current.selectionStart = cursorPosition;
        lendFeeInput.current.selectionEnd = cursorPosition;
      }, 0);
    }
  }

代码更改的解释：