React-组按钮切换对应tab栏这边的就直接讲一下怎样实现的吧，button那一块还是直接用到了Ant Design的

前言

今天又是来自于菜鸟司尘的一个实际应用分享，按钮切换对应tab栏怎样去实现，这边直接附上一张图大家就知道业务场景的，三个button对应单个表单，司尘呆呆是一个React新手，有时候居然卡在了一些被自己蠢哭的地方，这边只是做一个简单的分享。个人还是觉得React还是非常舒服的，至少在结合jsx有时候自定义一些小的模块的时候相当的方便。

实现

既然说到了是button切换对应的模块，那么我们就应该要想得到，表单模块的显示是在页面更新时只加载对应的模块，最开始的我还纠结于是通过 display: block || none 去实现这个功能，蠢哭自己。

这边的就直接讲一下怎样实现的吧，button那一块还是直接用到了Ant Design的一个联系按钮组件，知道功能就好了就是给对应按钮绑定了一个能够传递出去的值，我们外部定义一个变量来接收这个值。因为我们首次进来肯定是有显示的所以给定了 value={tags} 我们定义tags初始值为1传递进去，同时他也控制着按钮同步样式

<Radio.Group className="bottomSpacing" value={tags} onChange={this.handleTagChange}>
    <Radio.Button value={1}>输入参数</Radio.Button>
    <Radio.Button value={2}>输出参数</Radio.Button>
    <Radio.Button value={3}>请求事例</Radio.Button>
</Radio.Group>

那么当我们按钮点击发生改变的时候触发onChange里面绑定的方法，去根据对应value改变tags值。

handleTagChange = (e) => {
    this.setState({
        tags: e.target.value
    });
}

最后一步就是根据我们的tags值去控制对应组件渲染了，直接写到render中就行了，下面三个组件具体内容就不写了，就是上面定义的函数组件。

{ tags === 1 && this.inputParameterTag()}
{ tags === 2 && this.outputParameterTag()}
{ tags === 3 && this.requestCaseTag()}

总结

这种在实际用例中还是有很多的，今天也是碰到了就简单的分享一下，最开始想着用display: block || none 去实现还因为一些原因没有完成，真的是蠢哭自己了，简单的一个分享希望看到了能有一丢丢帮助。

本文使用 mdnice 排版