ReactJS Как поменять иконку (SVG) на клик? - PullRequest
Новая
       10

ReactJS Как поменять иконку (SVG) на клик?

2 голосов
/ 24 января 2020

Я использую Аккордеон Семанти c. Я заменил кнопку со стрелкой по умолчанию на свой SVG. У меня есть два SVG, одна верхняя стрелка (^), когда модал свернут, и одна стрелка вниз (∨), когда он открыт. При нажатии ^ я бы хотел изменить его на ∨. Как мне этого добиться? 

 <Accordion.Title active={this.state.activeIndex === idx} index={idx} onClick={this.clic}>
 <div className="fleche">
      <FlecheBasSVG // Down arrow
      onClick={<FlecheBasSVG />}/> {/* Up arrow */}
      Version {idx + 1} - {elem.etat ? t(`flot.split.etat.${elem.etat}`) : "flot.split.etat.INCONNU"}
</div>
</Accordion.Title>

1 Ответ

1 голос
/ 24 января 2020

React работает немного иначе, чем то, что вы пытаетесь сделать. Если вы хотите показать и скрыть элементы, вы можете сделать это с помощью переменной состояния. Я привел пример ниже. 

 state = {
     arrow: true;
 }

 const handleClick = () => {
     this.setState({arrow: !this.state.arrow})
 }


 <Accordion.Title active={this.state.activeIndex === idx} index={idx} onClick={this.clic}>
 <div className="fleche">
    // assuming the svg component has something to link an image (I am using an SRC prop, that probably wont work but is an example)
      {this.state.arrow ? <FlecheBasSVG onClick={this.handleClick} src="/path/to/up/image"/> : <FlecheBasSVG onClick={<this.handleClick} src="/path/to/up/image"/>}
      Version {idx + 1} - {elem.etat ? t(`flot.split.etat.${elem.etat}`) : "flot.split.etat.INCONNU"}
</div>
</Accordion.Title>
...