React中ref - 技术栈

字符串形式的ref

不建议使用已经被废弃了

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>字符串形式的ref</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>
</head>

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

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('root'));
        //字符串形式的ref
        class MyComponent extends React.Component {
            focus = () => {
                console.log("点我");
                const { myInput } = this.refs;
                console.log(myInput.value);
            }

            blur = () => {
                console.log("我失去焦点");
                const { myInput } = this.refs;
                console.log(myInput.value);
            }
            render() {
                return (
                    <div>
                        <button onBlur={this.blur} ref='input1'>点我失去焦点</button>
                        <input type="text" ref="myInput" />
                        <button onClick={this.focus} ref='input2'>点我</button>
                    </div>
                );
            }
        };
        root.render(<MyComponent />);

    </script>
</body>

</html>

函数回调形式的ref

这样调用ref={currentNode => this.myInput = currentNode}

这样拿值 const { myInput } = this;

console.log(myInput.value);

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>回调形式的形式的ref</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>
</head>

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

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('root'));
        //回调形式的形式的ref
        class MyComponent extends React.Component {
            focus = () => {
                console.log("点我");
                const { myInput } = this;
                console.log(myInput.value);
            }
            saveDate = (c) => {
                this.myInput = c
            }
            onblur = () => {
                console.log(this.myInput.value);
            }
            render() {
                //                        <!--箭头函数只有一个参数时，可以省略括号 ，当箭头函数语句只有一句时可以省略花括号-->
                return (
                    <div>
                        <p>内联式</p>
                        <input type="text" ref={currentNode => this.myInput = currentNode} />
                        <button onClick={this.focus} >点我</button>
                        <p>放在实例的自身上</p>
                        <input type="text" ref={this.saveDate} onBlur={this.onblur} />
                    </div>
                );
            }
        };
        root.render(<MyComponent />);

    </script>
</body>

</html>

createRef形式的ref

每一个createRef只能接收一个节点

创建ref节点 myRef = React.createRef();

存值 <input type="text" ref={this.myRef} />

复制代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>createRef的形式的ref</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    <script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>
</head>

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

    <script type="text/babel">
        const root = ReactDOM.createRoot(document.getElementById('root'));
        //createRef的形式的ref
        class MyComponent extends React.Component {
            //createRef形式的ref 只能接收一个元素节点 
            myRef = React.createRef();
            myInput = React.createRef();
            focus = () => {
                console.log(this.myRef.current.value);
            }
            onblur = () => {
                console.log(this.myInput.current.value);
            }
            render() {
                return (
                    <div>
                        <input type="text" ref={this.myRef} />
                        <button onClick={this.focus} >点我</button>
                        <input type="text" onBlur={this.onblur} ref={this.myInput} />
                    </div>
                );
            }
        };
        root.render(<MyComponent />);

    </script>
</body>

</html>