React 复用组件 含表单radio/checkbox注意的问题
来源:互联网 发布:淘宝店铺店名怎么改 编辑:程序博客网 时间:2024/05/28 17:08
一.问题描述:
上周使用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的值。
- React 复用组件 含表单radio/checkbox注意的问题
- React的表单组件
- jquery选择器 【radio checkbox】选择 【查找div下的表单具有某种属性的控件 :注意是div下】
- React-Native设置入口组件的问题,新手需注意
- 表单元素与提示文字无法对齐的问题(input,radio,checkbox文字对齐)
- checkbox radio 多选框单选框中jquery的使用问题
- jquery操作表单,包括常用的radio,checkbox,select
- 一款非常漂亮的bootstrap表单checkbox/radio样式推荐
- 一款非常漂亮的bootstrap表单checkbox/radio样式推荐
- 一款非常漂亮的bootstrap表单checkbox/radio样式推荐
- 利用jQuery来简化radio,checkbox,select,radio表单元素的操作
- react实现表单组件
- React中的表单组件
- 浅谈React表单组件
- radio,checkbox的选中
- 好看的checkbox、radio
- [React网络整理]React之表单组件的学习笔记
- Jsp表单测试-checkbox获取,radio获取
- Nginx配置文件详细说明
- 杭电1220 Cube
- 用Storage Foundation管好存储系统-入门
- C语言 预处理指令 3文件包含
- 【Leetcode】之Count and Say
- React 复用组件 含表单radio/checkbox注意的问题
- python入门笔记(Day6)--面向对象,实例,封装,继承多态,dir()
- 选择ASM时,存储划分的一点考虑
- 读写注册表的示例代码(待更新)
- 用Storage Foundation管好存储系统-进阶
- C语言 变量类型
- eclipse配置tomcat访问localhost:8080出现404
- HDU 1058 Humble Numbers【巧用优先队列】
- 【蓝桥杯】【六角填数】