React - 使用onClick事件更改材料图标

时间:2018-03-05 14:08:42

标签: javascript reactjs

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

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

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

上面的工作控制台输出测试非常好,我只是不知道如何处理这个。在网上完成了一些研究,无法找到任何相关信息。可以使用一些见解或想法来解决这个问题。

2 个答案:

答案 0 :(得分: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>
    )

}

答案 1 :(得分:0)

改善最后一个答案:

constructor() {
    super();
    this.state = { icon: true };
}

handleClick() {
    this.setState({ icon: !this.state.icon })   
}

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