时间戳

首页 > 解决方案 > 带有 useRef 的 ReactJS：聚焦一个可切换的表单

javascript - 带有 useRef 的 ReactJS：聚焦一个可切换的表单

问题描述

我正在使用 React 功能组件。

我有一个<form>元素，我想在它之间切换display: none和显示，并在它出现时显示focus()它的主要元素<input>。

（我使用 react-hook-form 来处理表单的提交，我认为这不会影响问题，但解释了一些起初可能不清楚的代码行。）


const EditBox = (props) => {
    const [mebOpen, setMebOpen] = useState(false);
    const { register, handleSubmit, reset } = useForm();
    const field = useRef(null);

    useEffect(() => {
        // console.log(field.current);
        if (mebOpen) {
            field.current.focus();
        }
    }, [mebOpen]);

    return (
        <>
            <span
                className={`clickable`}
                onClick={() => setMebOpen(!mebOpen)}
            >
                {props.triggerText}
            </span>
            <form
                className={`popout ${mebOpen ? "open" : "closed"}`}
                onSubmit={handleSubmit(handleVal)}
            >
                <input
                    ref={field}
                    type={props.inputType}
                    {...register("newVal")}
                />
                <button type="submit">Enter</button>
            </form>
        </>
    );
}

相关CSS：

> form.popout.closed {
    display: none;
}
> form.popout.open {
    display: flex;
    position: absolute;
    bottom: -2.6rem;
    z-index: 2;
}

使用上面的代码，表单外观的切换工作，但我得到一个错误，说field.current是并且找不到null它的属性。focus()即，直到钩子触发ref={field}后，代码才会关闭。useEffect

我尝试设置第二个useState变量，只是一个简单的计数器，以链式反应两个useEffect钩子；这很不雅，但我认为这可能是在渲染focus()后强制运行的方式。<input>但是连锁反应的渲染<input>也重新设置了元素，所以它仍然没有聚焦。

我怎样才能让它工作？学习一下会有forwardRef帮助吗？

标签： javascriptreactjsreact-hooks

解决方案

从 react-hook-form FAQs检查这个链接：

如何共享 ref 使用情况？ React Hook Form 需要一个 ref 来收集输入值，但是，您可能希望将 ref 用于其他目的（例如滚动到视图或焦点）。

这是您缺少的部分：

  1. 使用register添加一个新的钩子
  const { ref, ...rest } = register('newVal');
  1. 修改您的输入：
 <input
   {...rest}
   ref={e => {
     ref(e);
     field.current = e;
   }}
 />

检查我用你的代码制作的这个StackBlitz 。PD：我修改了 CSS，只是为了查看表单。

推荐阅读