点击按钮改变按钮自身的背景图片

Question

写了一个按钮点击后想改变自身图标

    <Popconfirm title="确定发布此名称么？" 
        onConfirm={download}
        okText="确认" cancelText="取消">
        <Tooltip title='发布'>
            <Button id ='b1' type='primary' shape='circle' icon='file-text' size='small' className='mr3'/>
        </Tooltip>
    </Popconfirm>

这样写可以改变背景颜色

    const download = ()=>{
        document.getElementById('b1').style.background='#dedede'
    }

但是下面这个改变图片就不行，应该怎么写啊？

const download = ()=>{
        document.getElementById('b1').icon='anticon anticon-close'
    }

Answer 1

icon 是你Button组件的props，不是你dom元素的attribute。

想要改变背景，你直接改变className就好了。

另外，少在react里直接操作dom。

Answer 2

setAttribute方法吧

Answer 3

你如果要改变元素属性应该这么写：

document.getElementById('b1').setAttribute("icon","anticon anticon-close")

不过你的意思是做背景颜色的替换，用改变class的变换比较合适，在css里面对这个class定义样式，想要改变的时候只要加上相应的class就行，比如

document.getElementById('b1').className = "anticon-close"

Answer 4

constructor(props) {
    super(props)//加不加props都是可以，如果要用this.props则必加
    this.state = {
        iconValue: 'file-text'
    }
}

<Popconfirm title="确定发布此名称么？" 
    onConfirm={download}
    okText="确认" cancelText="取消">
    <Tooltip title='发布'>
        <Button id ='b1' type='primary' shape='circle' icon={this.state.iconValue} size='small' className='mr3'/>
    </Tooltip>
</Popconfirm>

const download = ()=>{
    this.setState({
        iconValue: 'anticon anticon-close'
    })
}

Answer 5

通过设置一个state来改变icon

Answer 6

整个className;添加要改变的就行了。