React userref 未将焦点状态添加到字段

Question

我一直在尝试为此找到解决方案，我想将焦点状态添加到我的输入字段中。但它似乎不起作用：const textareaRef = useRef<HTMLInputElement>(null);...const handleClick = () => {        if (textareaRef.current) {            alert('Field clicked');            textareaRef.current.focus();            textareaRef.current.click();        }    };...<input     ref={textareaRef}     onClick={handleClick}     onFocus={(e) => e.persist()}     spellCheck="false"/>这是不行的，主要原因是要显示手机键盘。

Answer 1

我无法在桌面浏览器上重现该错误。录屏时用的是什么浏览器？

function App() {

  const textareaRef = React.useRef();

  const handleClick = () => {

    if (textareaRef.current) {

        console.log('Field clicked');

        textareaRef.current.focus();

    }

  };

  return (

    <div>

      <div onClick={handleClick}>click me to focus input</div>

      <input

       ref={textareaRef}

       onFocus={(e) => e.persist()}

      />

    </div>

  )

}

ReactDOM.render(

  <App />,

  document.getElementById('root')

)

<script src="https://unpkg.com/react@16.14.0/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@16.14.0/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您可以在useEffect() Hook 中执行此操作。下面的组件模拟了您的场景。当组件加载时，我使 focus() 出现在输入上。

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

const UseRefBasics = () => {

  const refContainer = useRef(null);

  const handleSubmit = (e) => {

    e.preventDefault();

    console.log(refContainer.current.value);

  };

  useEffect(() => {

    console.log(refContainer.current);

    refContainer.current.focus();

  });

  return (

    <>

      <form className='form' onSubmit={handleSubmit}>

        <div>

          <input type='text' ref={refContainer} />

        </div>

        <button type='submit'>submit</button>

      </form>

    </>

  );

};

export default UseRefBasics;

这是我给出的一般场景。您可以使用useEffect()并在状态更新时通过提供另一个参数useEffect(()=>{},[state1])或以您需要的任何方式获得焦点。