React 中的 useRef() 钩子！

嘿，各位创作者

useRef ()钩子是一种使用 React 选择元素的方法。您可以使用通常的document.querySelector方法，但它没有经过优化，因为它会遍历整个 DOM。而如果您使用此钩子，它只会在您的组件中查找！

如果您更喜欢观看视频版本，请点击此处：

1.我们来看一个真实的例子。

假设您有一个表格：

import "./App.css";

function App(){
    return (
        <div className="app">
            <form>
                <label htmlFor="name">Name</label>
                <input type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )
}

export default App;

为了使用useRef()钩子，让我们导入它：

import {useRef} from "react";

现在，让我们创建一些引用，并给它命名：

import {useRef} from "react";
import "./App.css";

function App(){

    const nameRef= useRef();

    return (
        <div className="app">
            <form>
                <label htmlFor="name">Name</label>
                <input type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )
}

export default App;

现在，您只需使用 ref 属性选择要添加到该 ref 中的元素即可。例如，让我们将其添加到第一个输入：

return (
        <div className="app">
            <form>
                <label htmlFor="name">Name</label>
                <input ref={nameRef} type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )

如果你打印它，它只会显示一个带有current属性的对象为undefined。然而，我们想要的是current属性的值。

由于组件首先执行，我们需要使用钩子useEffect()来查看 ref 的值。
这是因为 useEffect 回调函数是在组件创建后触发的。

import {useRef, useEffect} from "react";
import "./App.css";

function App(){

    const nameRef= useRef();

    console.log(nameRef)

    useEffect(() => {
        console.log(nameRef); // your ref obj
    }, [])

    return (
        <div className="app">
            <form>
                <label htmlFor="name">Name</label>
                <input ref={nameRef} type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )
}

export default App;

您需要使用箭头函数和一个空数组（即依赖数组）来填充useEffect()钩子，这意味着在创建该组件后，useEffect 只会被触发一次。

2. 好的，现在为第二个输入创建一个引用。

import {useRef, useEffect} from "react";
import "./App.css";

function App(){

    const nameRef= useRef();
    const mailRef = useRef()

    console.log(nameRef)

    useEffect(() => {
        console.log(nameRef);
    }, [])

    return (
        <div className="app">
            <form>
                <label htmlFor="name">Name</label>
                <input ref={nameRef} type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input ref={mailRef} type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )
}

export default App;

通常我们使用带有 onSubmit 方法的 Ref：

useEffect(() => {
        console.log(nameRef);
    }, [])

    const HandleSubmit = e => {
        e.preventDefault()
        console.log(nameRef.current.value);
        console.log(mailRef.current.value);
    }

    return (
        <div className="app">
            <form onSubmit={handleSubmit}>
                <label htmlFor="name">Name</label>
                <input ref={nameRef} type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input ref={mailRef} type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )

如果您想使用输入中的内容（例如 API 调用），可以添加console.log()。

现在，无论何时您在输入中写入并提交表单，值都会显示在控制台中。

3. 多引用。

如果参考文献太多，如何选择多个？

以空数组开始引用：

import {useRef, useEffect} from "react";
import "./App.css";

function App(){

    const inputs = useRef([]);

    const HandleSubmit = e => {
        e.preventDefault()
        console.log(inputs.current);
    }

    return (
        <div className="app">
            <form onSubmit={handleSubmit}>
                ...
            </form>
        </div>
    )
}

export default App;

然后，创建一个方法来检查元素是否未定义，如果它尚未在数组内，则将其推送到数组内：

const addInputs = el => {
        if(el && !inputs.current.includes(el)){
            inputs.current.push(el)
        }
    }

将该方法添加到每个输入中：

return (
        <div className="app">
            <form onSubmit={handleSubmit}>
                <label htmlFor="name">Name</label>
                <input ref={addInputs} type="text" id="name" />

                <label htmlFor="email">Email</label>
                <input ref={addInputs} type="text" id="email" />

                <button>Submit</button>
            </form>
        </div>
    )

做得好！现在你知道如何使用钩子 useRef()来选择元素了！

查看我的 YouTube 频道：https://www.youtube.com/c/TheWebSchool

来看看我的Youtube 频道吧：https://www.youtube.com/c/Learntocreate/videos

再见！

恩佐。

文章来源：https://dev.to/ziratsu/the-useref-hook-in-react-3h98