React页面渲染后如何将受控输入框光标聚焦至内容左侧？

要实现受控输入框聚焦后光标位于文本开头且保留初始内容，可以通过调用输入框DOM元素的setSelectionRange方法手动设置光标位置，以下是两种具体实现方案：

方案一：使用useRef结合useEffect #

在原有的useRef聚焦逻辑基础上，添加光标位置设置：

import React, { useEffect, useRef, useState } from "react"
import classes from './MainInput.module.css'

const MainInput = () => {
    const [inputValue, setInputValue] = useState('Wanna find out speed?')
    const inputHandler = (event) => {setInputValue(event.target.value)}

    const inputRef = useRef(null)

    useEffect(()=>{
      if (inputRef.current) {
        inputRef.current.focus()
        // 设置光标起始和结束位置都为0，即定位到文本开头
        inputRef.current.setSelectionRange(0, 0)
      }
    },[])

  return (
    <section className={classes.typespace}>
        <div className={classes.wrapper}>
            <input type="text" ref={inputRef}  className={classes.mainInput} 
            value={inputValue} onChange={inputHandler} />
        </div>
    </section>
  )
};

export default MainInput;

方案二：使用autoFocus结合onFocus事件 #

如果用autoFocus属性，需要在输入框的onFocus事件中设置光标位置：

import React, { useState } from "react"
import classes from './MainInput.module.css'

const MainInput = () => {
    const [inputValue, setInputValue] = useState('Wanna find out speed?')
    const inputHandler = (event) => {setInputValue(event.target.value)}

    const handleFocus = (e) => {
      // 聚焦后立即设置光标到开头
      e.target.setSelectionRange(0, 0)
    }

  return (
    <section className={classes.typespace}>
        <div className={classes.wrapper}>
            <input 
              type="text" 
              autoFocus 
              className={classes.mainInput} 
              value={inputValue} 
              onChange={inputHandler}
              onFocus={handleFocus}
            />
        </div>
    </section>
  )
};

export default MainInput;

原理说明 #

默认情况下，输入框聚焦时光标会自动定位在文本内容的末尾。setSelectionRange(start, end)方法可以手动指定光标或选中文本的范围，当start和end都设为0时，光标就会定位到文本的最左侧，同时不会修改输入框的现有内容。

内容的提问来源于stack exchange，提问作者AndreyDerets