我正在尝试在React中通过单击事件将材质图标从添加更改为删除。为了消除混乱,这与类无关,与实际显示的材质图标有关。添加是加号图标,我需要将其从添加更改为删除,这是一个减号图标。

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

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


上面的工作控制台输出测试完全正常,我只是不知道该如何处理。在网上做了一些研究,却找不到任何相关信息。可以结合一些见解或想法来使用此方法。

最佳答案

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

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>
    )

}

10-05 20:15
查看更多