时间戳

首页 > 解决方案 > 反应用户引用不向字段添加焦点状态

javascript - 反应用户引用不向字段添加焦点状态

问题描述

我一直在尝试为此寻找解决方案，我想将焦点状态添加到我的输入字段中。但它似乎不起作用：

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"
/>

这不起作用，主要原因是显示移动键盘。在这里看视频它不起作用https://share.getcloudapp.com/jkuYLqO5在这里没有警报https://share.getcloudapp.com/wbuKwrLE

标签： javascriptreactjs

解决方案

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

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>

推荐阅读