react之实现小功能（模拟实现radio）

1.首先问题是这样描述的：

从数组一次循环遍历每条数据，实现对每条数据进行选择，这里的选择是，有且只能选择一条数据

首先上代码：

idex.js

import React from "react";
import {Row, Col, Input, Button, Table} from "antd";
import style from "./index.less";
import { Title } from './component/main';
import Item from './component/item';
import I from "immuter";

class PyramidSelling extends React.Component {
    constructor(props){
        super(props);
        this.state={
            isChecked : false,
            checkIndex : -1
        }
    }
    handleClick(index) {
        const { isChecked, checkIndex } = this.state;
        if(!isChecked){     // 未选中
            this.setState({
                isChecked : true,
                checkIndex : index
            });
        }else{              // 已选中
            if(index === checkIndex){
                this.setState({
                    isChecked : false,
                    checkIndex : -1
                });
            }else{
                this.setState({
                    isChecked : true,
                    checkIndex : index
                });
            }
        }
    }

    render() {
        let data = [
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Txt' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Word' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Txt' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Excel' },
            { tablealias : '撒古拉', createdt : '2017-10-20', filetype : 'Word' }
        ];
        return (
            

                
                
                    {
                        data.map((value,index)=>{
                            return (
                                
                                    

                                        
                                    
                                
                            )
                        })
                    }
                
            
        )
    }
}

export default PyramidSelling;

item.js

import React,{ Component }from "react";
import { Corner } from '../../../components/EachTactis/components/main';
import { Icon } from 'antd';
import cs from 'classnames';
import style from "../index.less";


export default class Item extends Component {
    constructor(props){
        super(props);
    }

    render(){
        const { num, value, handleClick, checkIndex } = this.props;
        return(
            

                

                    
{value.tablealias}
                    
{value.createdt}
                
                

                    {value.filetype}
                
                
 handleClick() }>
                    
                
            
        )
    }
}