javascript - 如何在react js中关注页面加载时的html选择或按钮单击？

Question

这个问题已经有答案了:

How to set focus on an input field after rendering? (30 个回答)

已关闭 3 年前。

我正在创建一个 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 标记添加一个 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