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。
完成效果图：