// RefsDemo.js 文件
import React, { Component } from 'react'
class RefsDemo extends Component {
constructor(props) {
super(props)
// 用到這個方法createRef()
this.inputRef = React.createRef()
// call back ref
this.cbRef = null
this.setCbRef = (element) => {
this.cbRef = element
}
}
componentDidMount() {
if(this.cbDef) {
this.cbRef.focus()
}
// this.inputRef.current.focus()
// console.log(this.inputRef)
}
clickHandler = () => {
alert(this.inputRef.current.value)
}
render() {
return (
<div>
<input type="text" ref={this.inputRef}/>
<input type="text" ref={this.setCbRef}/>
<button onClick={this.clickHandler}>Click</button>
</div>
)
}
}
export default RefsDemo
在App.js 文件中
// App.js 文件
import React from 'react';
import './App.css';
import RefsDemo from './RefsDemo';
function App() {
return (
<div className="App">
<RefsDemo/>
</div>
);
}
export default App;
結果如下:
當我在第一個方框裏輸入"world"時,點擊Click按鈕,就會彈出Alert框
如果覺得不錯的話,就用點贊來代替五星好評吧!