学习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 按钮时，上面的方框会有响应。

---

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