React 进入页面之后自动 focus 到某个输入框

时间 2019-11-08

标签 react 进入页面之后自动 focus 某个输入栏目 React 繁體版

原文原文链接

在 React.js 当中你基本不须要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法帮助咱们进行事件监听，因此 React.js 当中不须要直接调用 addEventListener 的 DOM API；之前咱们经过手动 DOM 操做进行页面更新（例如借助 jQuery），而在 React.js 当中能够直接经过 setState 的方式从新渲染组件，渲染的时候能够把新的 props 传递给子组件，从而达到页面更新的效果。html

React.js 这种从新渲染的机制帮助咱们免除了绝大部分的 DOM 更新操做，也让相似于 jQuery 这种以封装 DOM 操做为主的第三方的库从咱们的开发工具链中删除。react

可是 React.js 并不能彻底知足全部 DOM 操做需求，有些时候咱们仍是须要和 DOM 打交道。好比说你想进入页面之后自动 focus 到某个输入框，你须要调用 input.focus() 的 DOM API，好比说你想动态获取某个 DOM 元素的尺寸来作后续的动画，等等。babel

React.js 当中提供了 ref 属性来帮助咱们获取已经挂载的元素的 DOM 节点，你能够给某个 JSX 元素加上 ref属性。dom

能够看到咱们给 input 元素加了一个 ref 属性，这个属性值是一个函数。当 input 元素在页面上挂载完成之后，React.js 就会调用这个函数，而且把这个挂载之后的 DOM 节点传给这个函数。在函数中咱们把这个 DOM 元素设置为组件实例的一个属性，这样之后咱们就能够经过 this.input 获取到这个 DOM 元素。函数

而后咱们就能够在 componentDidMount 中使用这个 DOM 元素，而且调用 this.input.focus() 的 DOM API。总体就达到了页面加载完成就自动 focus 到输入框的功能（你们能够注意到咱们用上了 componentDidMount 这个组件生命周期）。工具

咱们能够给任意表明 HTML 元素标签加上 ref 从而获取到它 DOM 元素而后调用 DOM API。可是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来作 React.js 原本就能够帮助你作到的页面自动更新的操做和事件监听。多余的 DOM 操做实际上是代码里面的“噪音”，不利于咱们理解和维护。开发工具

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 进入页面之后自动 focus 到某个输入框</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class AutoFocusInput extends React.Component {
  componentDidMount () {
    this.input.focus()
  }

  render () {
    return (
      <input ref={(input) => this.input = input} />
    )
  }
}
ReactDOM.render(
  <AutoFocusInput />,
  document.getElementById('root')
);
</script>
</body>
</html>