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 (
            <div>
                <Title name={"资源选择"}></Title>
                <Row gutter={24}>
                    {
                        data.map((value,index)=>{
                            return (
                                <Col md={4} lg={3} key={ index }>
                                    <div>
                                        <Item checkIndex={ this.state.checkIndex } num={ index } handleClick={ this.handleClick.bind(this,index) } value={value}></Item>
                                    </div>
                                </Col>
                            )
                        })
                    }
                </Row>
            </div>
        )
    }
}

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(
            <div className={style.item}>
                <div className={ style.content } >
                    <p className={style.name}>{value.tablealias}</p>
                    <p className={style.date}>{value.createdt}</p>
                </div>
                <div className={ cs( style[value.filetype], style["data_origin"] ) }>
                    <span>{value.filetype}</span>
                </div>
                <div className={ checkIndex === num ? style.checked_no : style.checked_yes } onClick={ () => handleClick() }>
                    <Icon type="check" />
                </div>
            </div>
        )
    }
}