Javascript ReactJS无法使输入自动聚焦工作

探索ReactJS并尝试创建名为“TextField”的基本组件。如果focus属性存在，则该字段应在组件装载后设置焦点。我有以下代码，但我无法找到焦点设置不起作用的原因：

import React, { Component } from "react";
import "./inputs.css";

export const TextField = class TextField extends Component {
    constructor(props){
        super(props);
        this.myRef = React.createRef();
    }
    componentDidMount(){
        if(this.props.focus){      
            this.myRef.current.focus();
        }
    }
    render(){
        var errid = this.props.id + "_errmsg";
        var labelStyle = "w3-label-font";
        var inputStyle = "w3-input w3-border w3-light-grey w3-round";
        return(
            <div>
                <label className={labelStyle}><b>{this.props.label}</b></label>
                <input className={inputStyle} type={this.props.type} id={this.props.id} name={this.props.name} ref={this.myRef}/>
                <div id={errid} className="error-msg"></div>
            </div>
        );
    };
}

import React，{Component}来自“React”；
导入“/inputs.css”；
export const TextField=类TextField扩展组件{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
componentDidMount（）{
如果（this.props.focus）{
this.myRef.current.focus（）；
}
}
render（）{
var errid=this.props.id+“_errmsg”；
var labelStyle=“w3标签字体”；
var inputStyle=“w3输入w3边框w3浅灰色w3圆形”；
返回(
{this.props.label}
);
};
}

您只需将

自动对焦

添加到要自动对焦的输入中即可

 <input autoFocus />

---

您的问题可能在于渲染

/*
在此处编写JavaScript/React代码，然后按Ctrl+Enter键执行。
Try:mountNode.innerHTML='helloworld！'；
或者：ReactDOM.render（Hello React！，mountNode）；
*/
类TextField扩展了React.Component{
建造师（道具）{
超级（道具）；
this.myRef=React.createRef（）；
}
componentDidMount（）{
this.myAwesomeInput.focus（）
}
render（）{
var errid=“\u errmsg”；
var labelStyle=“w3标签字体”；
var inputStyle=“w3输入w3边框w3浅灰色w3圆形”；
返回(
布拉布拉
{this.myAwesomeInput=input；}}/>
);
}
}
//下面的方法行不通
//ReactDOM.render(
//新建TextField（）.render（），
//document.getElementById（'容器'）
//);
//这管用！
ReactDOM.render(
,
document.getElementById（'容器'）
);

看看这把小提琴：