使用 React 的 useRef 挂钩

Question

我一直在使用 React 中的按钮组件构建我自己的选择组件。 当用户在菜单外单击时，我被困在如何关闭菜单上。 代码沙箱可以在这里找到：

我正在考虑在安装组件时添加一个事件侦听器，它将跟踪是否在菜单内进行了点击。 我期待使用 useRef Hook 来解​​决这个问题。

Answer 1

尝试这个：

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

export default function App() {
  const options = [
    {
      label: "Apple",
      value: "apple"
    },
    {
      label: "Ball",
      value: "ball"
    },
    {
      label: "Car",
      value: "car"
    }
  ];
  return (
    <div className="App">
      <SelectComponent options={options} />
    </div>
  );
}

function SelectComponent(props) {
  const ref = useRef(null)
  const [selectedVal, setSelectedVal] = useState("");
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  useEffect(() => {
    document.addEventListener("click", (e) => {
      //Insert code here.
    });
  }, []);

  useEffect(() => {
    document.addEventListener('click', handleClickOutside, false)
    return () => document.removeEventListener('click', handleClickOutside, false)
})

const handleClickOutside = (e) => {
    if (ref.current && !ref.current.contains(e.target)) setIsMenuOpen(false)
}

  const onSelectClick = () => {
    setIsMenuOpen((prevState) => !prevState);
  };

  const onValueSelect = (e) => {
    const {
      target: { id }
    } = e;
    setSelectedVal(id);
    setIsMenuOpen((prevState) => !prevState);
  };

  const computeClass = isMenuOpen ? "close-icon" : "open-icon";

  return (
    <div {...{ref}}>
      <button
        className={`select-btn selected-val ${computeClass}`}
        onClick={onSelectClick}
      >
        {selectedVal}
      </button>
      {isMenuOpen &&
        props.options.map((item) => {
          return (
            <button
              key={item.value}
              id={item.label}
              value={item.value}
              className={"select-btn"}
              onClick={onValueSelect}
            >
              {item.label}
            </button>
          );
        })}
    </div>
  );
}

Answer 2

处理组件中 useRef 的简单方法如下所示：-

这里我们的目标是在提交按钮单击时调整输入字段的大小。

import React, { useState, useRef } from "react";

const UseRef = () => {
  const inputRef = useRef();
  const [name, setName] = useState("");

  const handleSize = ()=>{
    console.log("submit");
    inputRef.current.style.width="300px"
  }
  return (
    <div>
      <label>Name:</label>
      <input
        ref={inputRef}
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        style={{ padding: "10px" }}
      />
      <br />
      <button onClick={handleSize} >submit</button>
    </div>
  );
};

export default UseRef;

inputRef是我在特定 DOM 元素中传递的 useRef 的实例，我们将在提交按钮的单击事件中对其进行操作。

inputRef.current.style.width="300px"这是对传递给函数handleSize()的 DOM 元素进行的操作

当从提交按钮调用 onClcik 事件时，按钮的大小将增加到 300px 。

我们还可以通过从输入字段中消除 onChange 和 value 属性来避免导入 useState & 来获得相同的结果。