React 复用组件 含表单radio/checkbox注意的问题

一.问题描述：

上周使用React在做一个后台管理的前端UI界面，应该没什么问题，结果，在联调时，发现在对同一个组件引用多次后，表单控件会“串联“。。。直接上图还是比较好呢。。。

其中A,B,C都是单选按钮，是同一个组件，在不同地方的多次复用 ！但是在，不同调用时候，会相互影响。

二.问题分析：

（1）由于新建和修改的结构以及要传回接口的数据是一模一样的，所以就选择在搭结构的时候复用组件。因为是复用组件，所以在遇到这个bug时，一直以为是由于组件的复用，state里的状态发生被共享了，然后查了很多资料找了很多例子来试，都没能解决这个问题。。。然后就郁闷了。。

（2）在查资料的过程中看到了一个不错的调试React的工具，果断安装。（工具名字是：React Developer Tools，浏览器：Chrome），安装之后，惊喜发现，通过它可以看到组件里的state和function,
截图如下：

“新建“－组件状态：

”修改“－组件状态：（列表里不只一个数据，为了更好的看出组件state变化，多贴两个组件状态）

因此可以看到，组件的复用不会共享状态，所以。。。之前的思路完全搞错啦！






（3）后来抛弃state会共享这一错误想法后，仔细查看审查代码后发现，

input 是radio/checkbox的表单，不管单选还是多选，都有一个name，

在复用组件时，state是根据组件的，在组件生命周期内有效的，即使名字相同，state也不会共享。

但是type=radio/checkbox的input，name是相对页面的，因为它是html代码，没有生命周期的，名字相同，就会认为是同一组的单选/多选的按钮，因此，要在复用组件时，要给name添加相应的编号，以区分不同。

三.解决问题：

复用组件时，注意表单的name的值。