Создавайте уникальные ссылки для дочерних компонентов, созданных с помощью карты, с помощью React Hooks - PullRequest
Новая
       10

Создавайте уникальные ссылки для дочерних компонентов, созданных с помощью карты, с помощью React Hooks

0 голосов
/ 12 марта 2020

У меня есть серия дочерних компонентов, созданных с использованием функции карты, и мне нужно определить, когда левая кнопка мыши нажата, а мышь находится в пределах каждой области дочернего компонента.

Если я могу проверить, есть ли ссылка когда кнопка мыши нажата, отличается от текущей ссылки, я могу остановить функцию, вызываемую при первом нажатии кнопки мыши, когда мышь покидает текущую область компонента.

У меня есть серия SVG-баров и Я хочу изменить их ширину, когда левая кнопка мыши нажата и удерживается, а мышь перемещается по оси X. В настоящее время проблема заключается в том, что если левая кнопка мыши все еще нажата, когда мышь перемещается по оси y и входит в целевую область другой панели svg, эта полоса перемещается на ширину, указанную текущей позицией X мыши. Это не то, что я хочу, потому что это приводит к путанице в пользовательском интерфейсе, и полоса «прыгает» на новую ширину. Я только хочу изменить ширину полосы, в которой находилась мышь, когда я нажал кнопку мыши.

Это функция карты, которая создает дочерние компоненты панели: 

    context.state.bars.map((item, index) => {
                                    return <Bar barName={key} barAmount={amount} colour={colour} />;
}

Это компонент Bar: 

import React, { useEffect, useState, useRef } from 'react';

import useMousePositionBar from '../../Utils/useMousePositionBar';

import './bar.css';

function Bar({
    barName,
    barAmount,
    colour,
}) {
    const barRef = useRef();
    const barContainerRef = useRef();

    const mouseState = useMousePositionBar(barRef, barContainerRef);

    const viewBoxWidth = 800;
    const viewBox = '0 0 ' + viewBoxWidth + ' 40';
    let adjustedWidth = barAmount / 10;
    const [ newWidth, setNewWidth ] = useState(adjustedWidth);

    const newWidthCheck = () => {
        if (newWidth > 760) {
            return 760;
        }
        return newWidth;
    };

    useEffect(
        () => {
            if (mouseState.mouseIsDown) {
                setRefs(barContainerRef);
                setNewWidth(mouseState.mouseIsDown - 300);
            }
        },
        [ mouseState.mouseIsDown ]
    );

    return (
        <div className="barContainer" ref={barContainerRef}>
            <div className="barName">{barName}</div>
            <div className="bar" ref={barRef}>
                <svg
                    width={newWidthCheck()}
                    // x="0"
                    // y="0"
                    height="40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    colour={colour}
                >
                    <rect width={newWidth} height="40" fill={colour} />
                </svg>
            </div>
            {<div className="barAmount">£ {newWidth * 10}</div>}
        </div>
    );
}

export default Bar;

А вот функция useMousePositionBar: 

import { useEffect, useState } from 'react';
const useMousePosition = (barRef, barContainerRef) => {
    const [ mouseIsDown, setMouseIsDown ] = useState(null);

    useEffect(() => {
        const setMouseDownEvent = (e) => {
            if (e.which == 1) {
                if (barContainerRef.current.contains(e.target)) {
                    setMouseIsDown(e.clientX);
                } else {
                    setMouseIsDown(null);
                }
            }
        };

        window.addEventListener('mousemove', setMouseDownEvent);
        return () => {
            window.removeEventListener('mousemove', setMouseDownEvent);
        };
    }, []);
    return { mouseIsDown };
};

export default useMousePosition;

Текущее поведение таково, что каждый раз, когда мышь находится над другим компонентом Bar, ссылка переходит на новый компонент.

Как отследить, какой Бар является целью, и разрешить использовать новый Бар как реф, только когда левая кнопка мыши снова поднята?

...