javascript - React - 如何使用 onClick 事件更改 Material 图标？

Question

我正在尝试使用 React 中的点击事件将 Material 图标从添加更改为删除。为了消除一些困惑，这与类无关，它与实际显示的 Material 图标有关。 Add是一个加号图标，我需要将它从add改为remove，这是一个减号图标。

handleClick() {
    console.log('test');    
}

render() {
    <div>
        <i className="material-icons mobile" onClick={(e) => this.handleClick(e)}>add</i>
    </div> 
}

上面的控制台输出测试完全正常，我只是不知道如何解决这个问题。在网上做了一些研究，找不到任何关于此的信息。可以结合一些见解或想法来解决这个问题。

Answer 1

您可以通过设置状态来做到这一点。像这样的事情:

state = { icon: true }

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

render() {
    const { icon } = this.state
    return(
        <i className='large material-icons' onClick={this.handleClick}>
            { icon ? 'add' : 'remove'}
        </i>
    )

}