Чтобы сделать SVG-схему поезда кликабельной в React, вам потребуется использовать обработчики событий и состояние компонента.
1. Импортируйте необходимые компоненты React:
import React, { useState } from 'react';
2. Создайте компонент, отображающий SVG-схему поезда:
const TrainScheme = () => { return ( <svg> {/* здесь размещаете свою SVG-схему поезда */} </svg> ); };
3. Создайте состояние компонента, чтобы отслеживать, какие элементы SVG были нажаты:
const TrainScheme = () => { const [selectedElement, setSelectedElement] = useState(null); const handleClick = (event) => { const elementId = event.target.id; setSelectedElement(elementId); }; return ( <svg> {/* здесь размещаете свою SVG-схему поезда, давая каждому элементу уникальный id */} </svg> ); };
4. Добавьте обработчики событий для клика на каждый элемент SVG:
const TrainScheme = () => { const [selectedElement, setSelectedElement] = useState(null); const handleClick = (event) => { const elementId = event.target.id; setSelectedElement(elementId); }; return ( <svg> <circle id="wagon1" cx="50" cy="50" r="30" onClick={handleClick} /> <circle id="wagon2" cx="100" cy="50" r="30" onClick={handleClick} /> {/* здесь размещаете другие элементы SVG и добавляете обработчики событий */} </svg> ); };
5. Отображайте некоторую информацию о выбранном элементе SVG:
const TrainScheme = () => { const [selectedElement, setSelectedElement] = useState(null); const handleClick = (event) => { const elementId = event.target.id; setSelectedElement(elementId); }; return ( <div> <svg> <circle id="wagon1" cx="50" cy="50" r="30" onClick={handleClick} /> <circle id="wagon2" cx="100" cy="50" r="30" onClick={handleClick} /> {/* здесь размещаете другие элементы SVG и добавляете обработчики событий */} </svg> {selectedElement && <p>Выбран элемент: {selectedElement}</p>} </div> ); };
Теперь, когда элемент SVG будет нажат, его id будет сохраняться в состоянии компонента, и информация о выбранном элементе будет отображаться под SVG-схемой поезда. Вы можете расширить этот пример, добавив дополнительную логику или использовав более сложные элементы SVG с атрибутами для более точного определения кликнутого элемента.