渲染组件后,如何在特定文本字段上设置焦点?

文件似乎建议使用参考文献,例如:

在渲染函数中的"我的输入"字段上设置ref="nameInput",然后调用:

this.refs.nameInput.getInputDOMNode().focus(); 

但我该怎么称呼这个呢?我试过几个地方,但都没法用.

推荐答案

你应该改成componentDidMountrefs callback.像这样的东西

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>

Javascript相关问答推荐

当在select中 Select 选项时,我必须禁用不匹配的 Select

通过在页面上滚动来移动滚动条

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

拖放仅通过 Select 上传

将状态向下传递给映射的子元素

在vercel throws上部署带有gunjs的sveltekit应用无法找到模块./' lib/文本编码'

仅针对RTK查询中的未经授权的错误取消maxRetries

为什么!逗号和空格不会作为输出返回,如果它在参数上?

使用POST请求时,Req.Body为空

如何修复我的数据表,以使stateSave正常工作?

当使用';字母而不是与';var#39;一起使用时,访问窗口为什么返回未定义的?

扩展类型的联合被解析为基类型

获取';无法解决导入和导入";slick-carousel/slick/slick-theme.css";';错误

使用插件构建包含chart.js提供程序的Angular 库?

WebSocketException:远程方在未完成关闭握手的情况下关闭了WebSocket连接.&#三十九岁;

用于测试其方法和构造函数的导出/导入类

如何检测当前是否没有按下键盘上的键?

在范围数组中查找公共(包含)范围

在此div中添加一个类,并在一段时间后在Java脚本中将其删除

如何使用useparams从react路由中提取id