23 Refs的应用场景与选用思考

最新推荐文章于 2022-01-01 21:44:10 发布

Stephy_Yy

最新推荐文章于 2022-01-01 21:44:10 发布

阅读量185

点赞数

分类专栏：系统学习 # react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120731636

版权

本文探讨了React.js中Refs的用途，包括访问真实DOM节点、强制动画执行、在不需要数据流的情况下修改子组件，以及在特定场景如input控件、video元素、引入jQuery和管理模态框状态提升时的运用。

摘要由CSDN通过智能技术生成

Refs含义

允许访问真实DOM
React数据流：通过props来实现父子组件的交互
Refs允许强制修改子组件

// 1. 构造器离添加实例属性 this.ref = React.createRef()
// 2. 组件上绑定ref ref={this.ref}
// 3. 使用：this.ref.current

input

class MyInput extends React.Component {
   
    constructor(props) {
   
        super(props)
        this.inputRef = React.createRef()
    }
    state = {
   
        value: '123'
    }
    // 聚焦 失焦
    inputFocus = () => {
   
        const oInput = this.inputRef.current
        oInput.focus()
        oInput.value = ''
    }
    inputBlur = () => {
   
        const oInput = this.inputRef.current
        oInput.blur()
        oInput.value = ''
    }
    changeInputValue = (e) => {
   
        this.setState({
   
            value: e.target.value
        })
    }
    render() {
   
        return (
            <div>
                <input
                    type="text"
                    ref={
   this.inputRef}
                    value=