ReactJS 如何更改图标（SVG）onClick？

Question

我正在使用语义 UI 的手风琴。我用我自己的 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>

Answer 1

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>

ReactJS 如何更改图标（SVG）onClick？

ReactJS How to change an icon (SVG) onClick?

javascript

svg

reactjs

semantic-ui