0

抱歉标题混乱

我正在向论坛添加编辑功能，我需要获取主题的标题元素高度和宽度，以便我单击编辑按钮，组件重新呈现，而不是标题，我们有一个具有标题宽度的文本输入和高度。问题是我只能正确执行一次。如果我在不刷新的情况下第二次编辑并保存，则下一个文本输入具有第一个编辑的标题宽度/高度

这是我的代码：

export default TopicComponent(someProps...){

const titleRef = useRef('');
const [isAuthor, setIsAuthor] = useState(author === user.id);
  const [editContentState, setEditContent] = useState(false);
  const [titleSize, setTitleSize] = useState({ height: null, width: null });

 useEffect(() => {
   setTitleSize({height: titleRef.current ? titleRef.current.offsetHeight : null, width: titleRef.current ? titleRef.current.offsetWidth : null})
  },[]);
function edit() {
    
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);
  }

  async function discard() {
   
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);
  }

 async function handleUpdateTopic() {
    setIsAuthor(!isAuthor);
    setEditContent(!editContentState);

   //do more stuff
  }

return (
    <div className={styles.container}>
      <span>
        <img alt="User Profile Pic" src={img_url} />
        <div className={styles.info}>
          {editContentState ? (
            <input
              className={styles.comment_box}
              style={{ height: titleSize.height, width: titleSize.width }}
              defaultValue={topicContent.title}
              onChange={(e) => (topicContent.title = e.target.value)}
            />
          ) : (
            <h1 ref={titleRef}>{topicContent.title}</h1>
          )}
          <p>
            {name} {surname}
          </p>
          {editContentState && (
            <>
              <button
                style={{ width: 200 }}
                type="button"
                onClick={handleUpdateTopic}
              >
                Save Changes
              </button>
              <button type="button" onClick={discard}>
                Discard changes
              </button>
            </>
          )}
          {isAuthor && (
            <button type="button" onClick={edit}>
              Edit
            </button>
          )}
        </div>
      </span>

所以我知道使用 useEffect 的这种方式我只设置了一次 titleSize 状态，我试图直接将 titleSize 属性改变为：

useEffec(()=> {
titleSize.width = titleRef.current ? titleRef.current.offsetWidth : null })

不强制重新渲染，但我得到相同的结果，我可以得到第一次加载的标题元素高度和宽度。

有人知道更好的方法吗？我到达了网络，但不幸的是我没有得到预期的答案（可能是因为我没有使用正确的关键字来获得正确的答案）

任何帮助真的很感激！

4

1 回答 1

0

我认为您应该将 topicContent 传递给 useEffect。所以当 topicContent 改变时， useEffect 再次运行。

useEffect(() => {
    setTitleSize({height: titleRef.current ? titleRef.current.offsetHeight : null, width: titleRef.current ? titleRef.current.offsetWidth : null})
},[topicContent]);
于 2021-03-31T11:31:52.127 回答