这篇博文是讲,如何attach refs to DOM elements and also class component in react.
咋们就直接上代码:
// Input.js 文件
import React, { Component } from 'react'
class Input extends Component {
constructor(props) {
super(props)
this.inputRef = React.createRef()
}
focusInput() {
this.inputRef.current.focus()
}
render() {
return (
<div>
<input type="text" ref={this.inputRef}/>
</div>
)
}
}
export default Input
// FocusInput.js 文件
// 这个文件是parent 文件
import React, { Component } from 'react'
import Input from './Input'
class FocusInput extends Component {
constructor(props) {
super(props)
this.componentRef = React.createRef()
}
clickHandler = () => {
this.componentRef.current.focusInput()
}
render() {
return (
<div>
<Input ref={this.componentRef}/>
<button onClick={this.clickHandler}>Focus Input</button>
</div>
)
}
}
export default FocusInput
在App.js 文件里
// App.js 文件
import React from 'react';
import './App.css';
import FocusInput from './FocusInput'
function App() {
return (
<div className="App">
<FocusInput/>
</div>
);
}
export default App;
结果如下:
当我点击Focus Input 按钮时,上面的方框会有响应。
如果觉得这篇博客不错,就用点赞来代替五星好评吧!