React useRef 设置 DOM 节点的宽度

Posted

技术标签:

【中文标题】React useRef 设置 DOM 节点的宽度【英文标题】:React useRef to set the width of a DOM node 【发布时间】:2021-04-18 01:02:30 【问题描述】:

所以我遇到了一个问题,我无法使用 useRef 更改 DOM 节点的宽度。我使用 onDragEnd 事件仅触发所选节点上宽度的更改。 我通过更改 'elementRef.current.style.width 属性来设置宽度。但是这种变化并没有反映在前端。

这是我的代码:

import React,  useEffect, useState, useRef  from "react";
import timelineItems from "../timelineItems";
import "../index.css";

const TimeLine = () => 
  const [sortedTimeline, setTimelineSorted] = useState([]);
  const increaseDateDomRef = useRef(null);

  let usedIndex = [];

  useEffect(() => 
    let sortedResult = timelineItems.sort((a, b) => 
      return (
        new Date(a.start) -
        new Date(b.start) +
        (new Date(a.end) - new Date(b.end))
      );
    );

    setTimelineSorted(sortedResult);
  , []);

  const increaseEndDate = (e) => 

  ;
  const increaseEndDateFinish = (e, idx) => 
    //Im setting the width here but it is not being reflected on the page
    increaseDateDomRef.current.style.width = '200px';
    console.log(increaseDateDomRef.current.clientWidth);
  ;

  return (
    <div className="main">
      sortedTimeline.map((item, idx) => 
        return (
          <div key=idx>
            <p>item.name</p>
            <p>
              item.start - item.end
            </p>
            <div className="wrapper">
              <div className="circle"></div>
              <div
                className="lineDiv"
                ref=increaseDateDomRef
                draggable
                onDragStart=(e) => increaseEndDate(e)
                onDragEnd=(e) => increaseEndDateFinish(e, idx)
              >
                <hr className="line" />
              </div>
              <div className="circle"></div>
            </div>
          </div>
        );
      )
    </div>
  );
;

export default TimeLine;

【问题讨论】:

【参考方案1】:

首先这可能不起作用,因为您对多个元素使用单个引用。

另一个帖子上的这个答案可能会帮助你https://***.com/a/65350394

但在你的情况下,我会做的事情非常简单。

const increaseEndDateFinish = (e, idx) => 
  const target = e.target;
  target.style.width = '200px';
  console.log(target.clientWidth);
;

您不必使用引用,因为您已经在事件目标上拥有了引用。

【讨论】:

非常感谢!我想我忽略了它。

以上是关于React useRef 设置 DOM 节点的宽度的主要内容,如果未能解决你的问题,请参考以下文章

#yyds干货盘点# react笔记之学习之useRef()和DOM对象

P09:useRef获取DOM元素和保存变量

ZF_react hooks useEffect的实现 useRef useImperativeHandle的实现,react整体功能实现完毕

React设置宽度的坑

如何在 React Native 中为 useRef 钩子设置 Typescript 类型?

如何在 UseEffect 中将事件侦听器添加到 UseRefs