react中如何做成 tab 切换的效果

Antd Design 中有一个 tab 切换的组件，但是个人觉得不是所有情况都需要用到这个。组件中有个 Radio 的样式类似于这个 tab 的操作。

 

这是官方面组件给出的样子，不同于之前 radio 单选按钮圆圈式的。

 

现在我想做成三个 按钮式的，并且每个按钮分别对应不同的 tab。

 

步骤：

 

    第一步：先把样式写好，组件引入 

 

const RadioButton = Radio.Button;

const RadioGroup = Radio.Group;

 

    <FormItem

        label="类型"

    >

        {getFieldDecorator('searchtype', {

            initialValue:1

        })(

            

            <RadioGroup onChange = {this.handleLink}>

                <RadioButton value={1}>商品汇总</RadioButton>

                <RadioButton value={2}>单据汇总</RadioButton>

                <RadioButton value={3}>明细查询</RadioButton>

            </RadioGroup>

        )}

    </FormItem>

 

    // 类型

    handleLink = (e)=>{

        const {

            dispatch,

            form

        } = this.props;

 

 

        form.validateFields((err, fieldsValue) => {

            if (err) return;

 

            // 日期

            const rangeTimeValue = fieldsValue['rangtime'] ? fieldsValue['rangtime'] : [];

 

 

            // 单据类型

            let billtypeID = '';

            let billtype = '';

            const arr = fieldsValue['billtypeID'];

            if (arr) {

                if (arr.length == 1) {

                    if (arr[0] == 0) {

                        billtype = 1;

                    }

                    if (arr[0] == 1) {

                        billtype = 2;

                    }

                } else if (arr.length == 2) {

                    billtype = 3;

                }

            }

 

            var values = {

                'starttime': '',

                'endtime': '',

                'customercode': this.state.customerID,

                'commoditycode': fieldsValue['commoditycode'],

                'billcode': fieldsValue['billcode'],

                'searchtype': e.target.value,

                'billtype': billtype,

            };

 

            if (rangeTimeValue.length > 0) {

                values['starttime'] = rangeTimeValue[0].format("Y-M-d");

                values['endtime'] = rangeTimeValue[1].format("Y-M-d");

            }

 

 

            this.props.handleSetState({

                formValues: values,

            })

 

            dispatch({

                type: 'wholeSales/fetch',

                payload: values

            });

        });

 

// 这里的props是为了把值传递给父级，默认进来的时候是选中在第一个上。父级代码如下图：

        this.props.handleSetState({searchtype : e.target.value});

    }

 

 

效果如图：

 

父级的代码效果图：

 

    第二步：在table里面写好三个 table。

 

完成效果图：