react.js - antd table 如何通过双击函数onRowDoubleClick()更新dataSource的值？

问题描述

问 题

项目中有一个文件列表的功能，双击根目录文件以进入子集页面，想通过更新dataSource值来实现相应效果（）,不知可行否?可行的话，如何实现？

import React, {Component} from "react";
import {Table, Icon} from 'antd';

const columns = [{
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a href="#">{text}</a>,
}, {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
}, {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
}, {
    title: 'Action',
    key: 'action',
    render: (text, record) => (
        <span>
      <a href="#">Action 一 {record.name}</a>
      <span className="ant-divider"/>
      <a href="#">Delete</a>
      <span className="ant-divider"/>
      <a href="#" className="ant-dropdown-link">
        More actions <Icon type="down"/>
      </a>
    </span>
    ),
}];

const data = [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
}, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
}, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
}];

const dataSon = [{
    key: '4',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
}, {
    key: '5',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
}];

class Test extends Component{
    render() {
        return (
            <Table
                columns={columns}
                dataSource={data}
                onRowDoubleClick={
                    // TODO
                }
            />
        )
    }
}

export default Test

DEMO

解决方案

行内注册点击事件，回调更改data数据源

    doubleclick(){
    this.state.data = data ? this.setState({data : dataSon})  : this.setState({data :     data})}
    render(){
    const dataSon = [{
        key: '4',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
        ondoubleclick()=>this.doubleclick()
    }, {
        key: '5',
        name: 'Jim Green',
        age: 42,
        address: 'London No. 1 Lake Park',
        ondoubleclick()=>this.doubleclick()
    }];
    return(
        <table source = {this.state.data}>
    )
        }

这篇关于react.js - antd table 如何通过双击函数onRowDoubleClick()更新dataSource的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！