如何关注html选择页面加载或按钮点击反应js？[重复]

Question

我正在创建一个react js应用程序，并使用HTML选择下拉列表。我想重点关注页面加载时的选择。下面显示了我在select中使用的代码。

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

Answer 1

这一行：

<select autofocus>

应具有id属性，如下所示：

<select autofocus id="selectElem">

JS:

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

Answer 2

这是使用参考的反应方式：

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

裁判和DOM

代码沙盒示例

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

Answer 3

您需要向选择标记添加一个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