时间戳

首页 > 解决方案 > ReactJS Hooks UseRef 返回 null

reactjs - ReactJS Hooks UseRef 返回 null

问题描述

我正在使用 react-hook 将样式从 span 元素复制到 input 元素。如果编辑状态变为真，则此组件从跨度切换为输入。但是我想保持跨度内的样式。到目前为止，这不起作用并且 inputEl 总是返回 null。

我愿意接受新的想法来实现这一点。

import React, { useState, useRef, useEffect } from "react";
const Editable = props => {
  const [edit, setEdit] = useState(false);
  let children = props.children;
  const spanEl = useRef(null);
  const inputEl = useRef(null);
  const handleClick = () => {
    setEdit(!edit);
  };
  useEffect(() => {
    inputEl.current.served.style = spanEl.current.style;
  }, [inputEl]);
  if (edit) {
    return <input ref={inputEl} onClick={handleClick} value={children} />;
  } else {
    return (
      <span ref={spanEl} onClick={handleClick}>
        {children}
      </span>
    );
  }
};

export default Editable;

标签： reactjsreact-hooks

解决方案

你得到的错误是运行时错误，因为最初你的条件是错误的，所以它将进入else块而不是if块，并且在你的else块中没有<input />元素。如您所知，在useEffect页面加载时运行，因此您不能使用甚至不存在inputEl.current.served.style的useEffect。

您可以做的一件事是：

<input hidden ref={inputEl} onClick={() => handleClick()} value="value" /> 在您的块else中添加此代码

或inputEl.current.served.style在您的 ref in 中添加初始值，const inputEl = useRef(null);而不是在此处添加 null。

你可以参考这里的演示。

推荐阅读