自动对焦在React中不起作用

Question

我遇到autoFocus问题。它对我不起作用，但使用它：

<input onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />

Answer 1

你正在做的其他事情可能导致它失败。它在这个简单的例子中工作正常：

const App = React.createClass({
  render() {
    return ( 
      <input
       placeholder = "Name..."
       type = "text"
       autoFocus 
      / >
    );
  }
});

ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


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

Answer 2

如果自动对焦对您不起作用，那么您可以尝试使用javascript的.focus()功能，这将始终有效：）

componentDidMount() {
    document.getElementById("name").focus();
}

<input id="name" onChange={this.handleName} value={this.state.name} placeholder="Name..." type="text" autoFocus />

Answer 3

我有两个输入，我将autoFocus应用于其中，一个有效，而另一个没有。它们都是reactstrap输入字段：

import { Button, Input } from 'reactstrap';

我发现一个人有一个名字而没有名字，那是可行的。所以我将另一个更改为相同，并且开始工作：

      <Input
        autoFocus="autofocus"
        id="code"
        type="text"
        value={props.codeValue}
        onChange={props.onCodeChange}
        onKeyPress={event => {
          if (event.key === 'Enter') {
            confirmCode();
          }
        }}
      />

Answer 4

这些都不对我有用：

<input type="text" autoFocus        .../>
<input type="text" autoFocus={true} .../>
<input type="text" autoFocus="true" .../>
<input type="text" autoFocus="autofocus" .../>

…即使在每种情况下，网络检查人员都显示<input type="text" autofocus .../>呈现为?

也许是因为this phenomenon，我不确定：

如果将React组件渲染为一个分离的元素，React将过早调用focus()。当您将React树添加到DOM时，这将导致input无法聚焦。

这项 为我工作：

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

export default function SignIn() {
  const inputElement = useRef(null);
  useEffect(() => {
    if (inputElement.current) {
      inputElement.current.focus();
    }
  }, []);

  return (
    <div>
        <form action="...">
            <input
                  ref={inputElement} // yes, this is working in Chrome on Mac 
                  type="text" // allows username also; type 'email' woud insist on '@' sign
                  name="email"
                  placeholder="Email address"
                  autoComplete="email"
                  required
                  ...
                />
        </form>
    </div>
  );
}

这是Daniel Johnson的策略＃2