问AutoFocus在React中不起作用

EN

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>

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

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>
  );
}

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();
          }
        }}
      />