0
点赞
收藏
分享

微信扫一扫

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

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

在 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 元素的尺寸来做后续的动画,等等。

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>


举报

相关推荐

0 条评论