学习React(25) - 介绍refs to DOM elements

这篇博文是讲，如何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 按钮时，上面的方框会有响应。

---

如果觉得这篇博客不错，就用点赞来代替五星好评吧！