antd的table實現鼠標移到某一行顯示操作列的操作按鈕

實現效果如下：

代碼實現：

rowKey一定
<Table
                rowSelection={rowSelection}
                rowKey='id'
                onRow={this.onRow}
                rowClassName={this.setClassName}
                columns={columns}
                dataSource={data} />
// 鼠標移入每一行的事件
    onRow = (row, index) => {
        return {
            onMouseEnter: event => {
                const { dispatch } = this.props;
                dispatch ({
                    type: 'projectManage/upState',
                    payload: {
                        hoverIndex: index
                    },
                });
            },
            onMouseLeave: event => {
                const { dispatch } = this.props;
                dispatch ({
                    type: 'projectManage/upState',
                    payload: {
                        hoverIndex: -1
                    },
                });
            }
        }
    }
   //添加類名
    setClassName = (record, index) => {
        const { projectManage } = this.props;
        const { hoverIndex } = projectManage;
        return index === hoverIndex ? styles.rowActive : "";
    }

控制類名的opacity爲0或1來控制，最後就達到了產品需要的效果，真的是難爲人啊