react中怎么设置focus-前端问答-PHP中文网

react中怎么设置focus

藏色散人

发布： 2022-12-27 11:18:38

原创

2481人浏览过

react中设置focus的方法：1、在componentDidMount中使用DOM元素；2、调用“this.input.focus()”的 DOM API即可使整体达到页面加载完成就自动focus到输入框的功能。

react中怎么设置focus

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react中怎么设置focus？

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

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

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

但是 React.js 并不能完全满足所有 DOM 操作需求，有些时候我们还是需要和 DOM 打交道。比如说你想进入页面以后自动 focus 到某个输入框，你需要调用 input.focus() 的 DOM API，比如说你想动态获取某个 DOM 元素的尺寸来做后续的动画，等等。

塔可商城

塔可商城, 一个基于springboot+uniapp+vue3技术栈开发的开源跨平台小程序、管理后台，后端服务的项目，它内置提供了会员分销，区域代理，商品零售等功能的新零售电商系统。强大弹性的架构设计，简洁的代码，最新的技术栈，全方面适合不同需求的前端，后端，架构的同学，同时更是企业开发需求的不二选择。项目结构通过项目结构，你将清楚明白你即将入手的是一个怎么样的项目，你可能需要什么，如何

查看详情

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

可以看到我们给 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>

登录后复制

另一种写法：

<!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 MyComponent extends React.Component {
  constructor(props) {
    super(props);
 
    this.inputRef = React.createRef();
  }
 
  render() {
    return <input type="text" ref={this.inputRef} />;
  }
 
  componentDidMount() {
    this.inputRef.current.focus();
  }
}
 
 
ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);
</script>
</body>
</html>

登录后复制

推荐学习：《react视频教程》

以上就是react中怎么设置focus的详细内容，更多请关注php中文网其它相关文章！