通过一个例子说明一下:
功能:按钮点击使input组件显示,显示后实现input的光标聚焦。
分析:input组件显示后才能调用input的focus()。
1.定义class的实现方式:
import React from 'react';
import { Button, Input } from 'antd';
class App extends React.Component {
state = {
inputVisible: false,
};
saveInputRef = input => (this.input = input);
showInput = () => {
this.setState({
inputVisible: true
}, () => this.input.focus());
};
render() {
return (
<div>
{
inputVisible &&
<Input
ref={this.saveInputRef}
type="text"
/>
}
<Button onClick={this.showInput}>显示input</Button>
</div>
);
}
}
export default App;
setState提供了回调函数,当inputVisible的状态更改为true后,才能操作this.input.focus()。
2.react Hook中的实现方式:
import React, { useState, useEffect, useRef } from 'react';
import { Button, Input } from 'antd';
const App = props => {
const [inputVisible, setInputVisible] = useState(false);
const inputRef = useRef();
const showInput = () => {
setInputVisible(true);
};
useEffect(() => {
if (inputRef.current) {
inputRef.current.focus();
}
}, [inputVisible])
render() {
return (
<div>
{
inputVisible &&
<Input
ref={inputRef}
type="text"
/>
}
<Button onClick={showInput}>显示input</Button>
</div>
);
}
}
export default App;
首先通过useRef获取到input元素,useState不能再使用像class中那种回调函数的方式。
所以要使用useEffect,当它监听到inputVisible的变化,这时说明state中的inputVisible已经变为true,这时即可执行focus()。