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

Question

[mr jeery]

С помощью 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

let card = document.getElementsById(event.target.id)
    console.log("card",card)
    console.log("card.stroke",card.stroke)

Answer 1

[0xD34F]

При нажатии на 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}>
  ...

Comments

[mr jeery]

event.target.closest('svg').children[2].children[0].children[2].children[0].getAttribute('stroke')

Я нахожу атрибут нужный, спасибо.
Но присваиванием его не изменить.

Module build failed: SyntaxError: Invalid left-hand side in assignment expression

Что я не так делаю ?

[0xD34F]

.children[2].children[0].children[2].children[0]

не надо так, используйте querySelector

присваиванием его не изменить

setAttribute

Но вообще, в react дела так не делаются. Дополнил ответ.