0

そのため、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;
4

1 に答える 1

1

まず第一に、複数の要素に対して単一の参照を使用しているため、これが機能しない可能性があります。

別の投稿のこの回答はあなたに役立つかもしれませんhttps://stackoverflow.com/a/65350394

しかし、あなたの場合に私がすることは、かなり単純なことです。

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

イベント ターゲットには既に参照があるため、参照を使用する必要はありません。

于 2021-04-18T01:18:24.350 に答える