這篇博文是講,如何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 按鈕時,上面的方框會有響應。
如果覺得這篇博客不錯,就用點贊來代替五星好評吧!