如何专注于页面加载时的html选择或反应js中的按钮单击？ [复制]答案

【问题标题】：How to focus on html select on page load or button click in react js? [duplicate]如何专注于页面加载时的html选择或反应js中的按钮单击？ [复制]
【发布时间】：2020-04-02 11:10:57
【问题描述】：

我正在创建一个 react js 应用程序，并使用 HTML 选择下拉菜单。我想专注于页面加载时的选择。下面显示了我在选择中使用的代码。

<select id="sel_bookID" autofocus> 
  <option value="binary"> 
    Binary Search 
  </option> 
  <option value="linear"> 
    Linear Search 
  </option> 
  <option value="interpolation"> 
    Interpolation Search 
  </option> 
</select>

我也在使用下面提到的一些 StackOverflow 解决方案，但没有奏效。

//jquery
$(document).ready(function(){
    $('#sel_bookID').focus();
});

或

//javascript
document.addEventListener('DOMContentLoaded', function(){ 
    document.getElementById('sel_bookID').focus();
}, false);

【问题讨论】：

你需要在componentDidMount中使用focus，你试过的是javascript和jquery的方式。
对不起，我的错误。我没有添加 id 属性，但也添加了 id 它不起作用。

标签： javascript jquery reactjs

【解决方案1】：

你需要像这样向你的选择标签添加一个 id 属性：

<select autofocus id="sel_bookID"> 
  <option value="binary"> 
    Binary Search 
  </option> 
  <option value="linear"> 
    Linear Search 
  </option> 
  <option value="interpolation"> 
    Interpolation Search 
  </option> 
</select>

否则，你的 js 脚本找不到 id 为 sel_bookID 的元素并返回 undefined

【讨论】：

在 react js 中不工作。这个我试过了。

【解决方案2】：

这是使用 refs 的反应方式：

import React from "react";
import ReactDOM from "react-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus();
  }

  render() {
    return (
      <div className="App">
        <select ref={this.myRef}>
          <option value="react">React</option>
          <option value="vue">Vue</option>
          <option value="angular">Angular</option>
        </select>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Refs and the DOM

CodeSandBox Example

如果您更喜欢 autofocus 选项，则必须使用 autoFocus 才能使其工作

【讨论】：

控制台出现错误“l.a.createRef 不是函数”。
我不知道l.a.createRef 是什么意思，你可以看到例子中没有错误。正如我所说，最简单的方法是使用autoFocus prop。
代码沙箱示例也不起作用。
我不知道为什么当 html 选择 using.bcoz no.of 解决方案在 stackoverflow 中可用时自动对焦在 react js 中不起作用我已经尝试过，之后我放入了 stackoverflow
您是否在代码框浏览器（iframe）中单击了刷新？

【解决方案3】：

这一行：

<select autofocus>

应该有一个id属性，像这样：

<select autofocus id="selectElem">

JS：

window.onload = function () {
    document.getElementById('selectElem').focus();
};

【讨论】：

不工作先生，抱歉我的错误在发布之前没有正确检查。但 id 也添加了不起作用。
window.onload 也在使用但无法正常工作。这是 stackoverflow 上现有的解决方案。
应该可以了，能不能添加完整的代码，包括react.js的实现