想利用Antd的Table做一个播放器,请问在播放暂停的时候如何修改对应行数的Icon

Question

问题描述

因为<Icon />我是统一渲染的, 然后通过state统一修改状态,导致只要状态变了, 所有的Icon都会跟着变动。但是我想只变点击的那一个。需求比较奇怪, 希望大神见谅

问题出现的环境背景及自己尝试过哪些方法

在Antd的Icon组件里面的type属性加了一个三元判断。导致Icon统一变化

相关代码

const columns = [{
    title: '歌手',
    dataIndex: 'name',
    key: 'name',
    width: 400
}, {
    title: '歌曲',
    dataIndex: 'song',
    key: 'song',
}, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    render: (text, record, rowkey) => (
        <span>
            <Icon type="download" className="action marginRight"/>
            <Icon type={ isPlay ? `pause-circle` : `play-circle`}  className="action" onClick={this.handlePlay.bind(this, record, rowkey)}/>
        </span>
    )

<Table

columns={columns}
dataSource={tableList}

/>

你期待的结果是什么？实际看到的错误信息又是什么？

希望只改变点击播放的那一行的icon

Answer 1

首先我猜测题主的isPlay是点击了某一行的播放之后改为true的，这样就会导致所有行的Icon跟着改变
我的思路是点击某一行的播放后改变当前record的isPlay属性，就是要给当前点击的record加上isPlay为true，点击暂停的时候改为false

{
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    render: (text, record, rowkey) => (
        <span>
            <Icon type="download" className="action marginRight"/>
            <Icon type={ record.isPlay ? `pause-circle` : `play-circle`}  className="action" onClick={this.handlePlay.bind(this, record, rowkey)}/>
        </span>
    )

这样应该就可以了