react之antd组件table点击当前行选择数据

react之antd组件table点击当前行选择数据

在table渲染表格是点击当前行选择当前数据，点击复选框显示对勾。

看到开发文档里有案例就复制下来自己改吧改吧。

效果图：

上代码：

//react 开发

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  render: text => <a href="#">{text}</a>,
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];

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',
}, {
  key: '4',
  name: 'Disabled User',
  age: 99,
  address: 'Sidney No. 1 Lake Park',
}];

class App extends React.Component {
  state = {
    selectedRowKeys: [],          //表格渲染数据的key
  };
  selectRow = (record) => {
    const selectedRowKeys = [...this.state.selectedRowKeys];
    
    if (selectedRowKeys.indexOf(record.key) >= 0) {
      //当点击选中的数据，取消选中
      selectedRowKeys.splice(selectedRowKeys.indexOf(record.key), 1);
    } else {
      //选中的数据放入数组
      selectedRowKeys.push(record.key);
    }
    this.setState({ selectedRowKeys });
  }
  onSelectedRowKeysChange = (selectedRowKeys) => {
    this.setState({ selectedRowKeys });
  }
  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectedRowKeysChange,
    };
    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
        onRow={(record) => ({
          onClick: () => {
            this.selectRow(record);
          },
        })}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));
          

这是官方给的一个简单的例子，和自己的需求还有点出入。
官方获取的是当前数据的key，自己需要获取整条数据内容。

//自己更改的代码
state = {
    selectedRows: [],          //存放自己需要的数据
};
selectRow = (record) => {
	//获取存放的key
	const selectedRowKeys = [...this.state.selectedRowKeys];
	//获取存放的数据value
	const selectedRows = [...this.state.selectedRows];  
	if (selectedRowKeys.indexOf(record.流程实例ID) >= 0) {
		//当点击选中的数据，取消选中
		selectedRowKeys.splice(selectedRowKeys.indexOf(record.流程实例ID), 1);
		//取消选中也要删除数组中的value
		selectedRows.forEach((element,index) => {
			if(element.流程实例ID === record.流程实例ID){
				//更具id获取到数组里当前数据的下标，并删除。
				selectedRows.splice(index,1)
			}
		});
	} else {
		selectedRowKeys.push(record.流程实例ID);
		//将选中的数据加入数组里
		selectedRows.push(record)
	}
	this.setState({ selectedRowKeys,selectedRows });    
}

render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
		selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
			this.onSelectedRowKeysChange(selectedRowKeys)
			//点击复选按钮将值添加到数组里
			this.setState({
				selectedRows: selectedRows,
			});
		},
	};
    return (
		<Table
			rowSelection={rowSelection}
			columns={columns}
			dataSource={data}
			onRow={(record) => ({
			onClick: () => {
				this.selectRow(record);
			},
		})}
      />
    );
  }

別翻了，到底了。。。。。

没有了