React 组件的三大核心属性之 ref 在类式组件中的基本使用 

<head>
    <meta charset="UTF-8">
    <title>demo</title>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 支持react操作DOM -->
    <script type="text/javascript" src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 将jsx转为js -->
    <script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
    <!-- 对组件标签属性进行限制, React v15.5之后，React.PropTypes 移入此包 -->
    <script type="text/javascript" src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>

</head>
<body>
<div id="root"></div>

<script type="text/babel">

ref 使用方式一(字符串 - ref)

  class ClassComponent extends React.Component {

 	/* 字符串 - ref */
        showText1 = () => {
            const {input1} = this.refs
            alert(input1.value)
        }

        render() {
            return (
                <div>
                   {/* 字符串 - ref */}
                   <input ref="input1" onBlur={this.showText1} type="text" placeholder="失去焦点事件"/>
                </div>
            )
        }
    }

ref 使用方式二(回调函数 - ref)

 class ClassComponent extends React.Component {

		/* 回调函数 - ref */
        saveRef = (c) => {
            this.input22 = c;
        }

        showText21 = () => {
            alert(this.input21.value);
        }

        showText22 = () => {
            alert(this.input22.value);
        }

        render() {
            return (
                <div>
                   {/* 回调函数 - ref */}
                   <input ref={c => this.input21 = c} onBlur={this.showText21} type="text" placeholder="失去焦点事件"/>
                   {/* 回调函数 - ref */}
                   <input ref={this.saveRef} onBlur={this.showText22} type="text" placeholder="失去焦点事件"/>
                </div>
            )
        }
    }

ref 使用方式三(React.createRef())

   class ClassComponent extends React.Component {

		/* React.createRef() */
        //“专人专用”
        myRef = React.createRef()

        showText3 = () => {
            alert(this.myRef.current.value)
        }

        render() {
            return (
                <div>
                   {/* React.createRef() */}
                   <input ref={this.myRef} onBlur={this.showText3} type="text" placeholder="失去焦点事件"/>
                </div>
            )
        }
    }

    //1.创建虚拟DOM
    const vDOM = <div>
        <ClassComponent/>
    </div>;
    //2.渲染虚拟DOM到页面
    ReactDOM.render(vDOM, document.getElementById("root"));
</script>
</body>
posted @ 2022-03-07 18:03  叕叕666  阅读(100)  评论(0)    收藏  举报