Задать вопрос
jeerjmin
@jeerjmin
react

Как написать handleSubmit на изменить атрибута svg в React?

С помощью react-samy-svg я добавляю svg и могу менять аттрибуты в svg. Я хочу написать handleSubmit который будет определять вызвавший его svg и менять stroke.

Добавленные svg, которые состоят из элементов(картинки, фигуры, текст)

handleSubmit(event) {

        console.log("event", event.target.id)
        let card = document.getElementById(event.target.id)
        console.log("getD",card)
   

    }

 render() {
        return (
            <div>
                <div className="banners" onClick={this.handleSubmit}>
                        <Samy svgXML={fuagra}>
                            <SvgProxy className="" selector="#Fuagra-border-1" stroke={this.state.strokeFuagra}/>
                            <SvgProxy selector="#Fuagra-border-2" stroke={this.state.strokeFuagra} />
                        </Samy>;
                        <Samy svgXML={fish}>
                            <SvgProxy selector=".shp2-2 " stroke={this.state.strokeFish} />
                            <SvgProxy selector=".shp3-2 " stroke={this.state.strokeFish} />
                        </Samy>;
                        <Samy svgXML={chicken}>
                            <SvgProxy selector=".shp2" stroke={this.state.strokeFuagra} />
                            <SvgProxy selector=".shp3" stroke={this.state.strokeFuagra} />
                        </Samy>;
                </div>
            </div>
        )
    }


Проблема 1:
При нажатии на svg, event.target присваивается конкретным элементам - картинка внутри svg, текст, фигура итд.
А хотелось бы получить эл-т или чтобы легко изменить атрибут.

Проблема 2:
Я пошел другим путем.
Допустим я нашел нужный эл-т, и вижу в console.log нужный атрибут, но если вызвать его напрямую, возвращается undefined
5b34dc7f67fa4676496591.png
let card = document.getElementsById(event.target.id)
    console.log("card",card)
    console.log("card.stroke",card.stroke)
  • Вопрос задан
  • 133 просмотра
Комментировать
Подписаться 1 Средний Комментировать
Решения вопроса 1
0xD34F
@0xD34F Куратор тега React
При нажатии на svg, event.target присваивается конкретным элементам - картинка внутри svg, текст, фигура итд.

event.target.closest('svg')

Допустим я нашел нужный эл-т, и вижу в console.log нужный атрибут, но если вызвать его напрямую, возвращается undefined

card.getAttribute('stroke')

UPD. Но вообще, вы совсем не в том направлении двигаетесь. Вместо того, чтобы пытаться достучаться до атрибутов, надо работать со стейтом, который определяет их значения. Как-то так:

onClickFuagra = () => {
  this.setState({
    strokeFuagra: '...',
  });
}

onClickFish = () => {
  this.setState({
    strokeFish: '...',
  });
}

<Samy svgXML={fuagra} onClick={this.onClickFuagra}>
  ...
</Samy>
<Samy svgXML={fish} onClick={this.onClickFish}>
  ...
</Samy>

Можно конечно и общий обработчик оставить:

onClick = e => {
  const svg = e.target.closest('svg');

  this.setState({
    [имя свойства зависит от svg, как определить по кому был клик - думайте сами]: '...',
  });
}

<div className="banners" onClick={this.onClick}>
  ...
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend React
Glob-com
от 100 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать Solana смарт-контракт на Rust
18 апр. 2024, в 18:06
45000 руб./за проект
Сделать график на React Flow (возможно замена инструмента) с lazyload
18 апр. 2024, в 17:59
20000 руб./за проект
Создание мобильного приложения на flutter
18 апр. 2024, в 17:54
250000 руб./за проект
Ещё заказы