前端BUG总结-Input是否禁用状态修改

最新推荐文章于 2022-12-09 14:19:43 发布

焦杨2019

最新推荐文章于 2022-12-09 14:19:43 发布

阅读量552

点赞数 1

分类专栏： BUG 总结 Javascript 文章标签： BUG

本文链接：https://blog.csdn.net/weixin_45344873/article/details/101548810

版权

本文总结了前端开发中关于Input禁用状态控制的常见问题与修复方案。在ebay多属性编辑场景中，遇到新增属性后输入框禁用的BUG，以及删除与新增操作后输入框状态判断错误的情况。关键在于正确设置禁用条件，考虑全量可能值，包括null, undefined, 0, 空字符串等，并在组件挂载时对比初始状态，使用适当的逻辑运算符处理判断逻辑。" 78769331,5073045,LNMP卸载指南与备份关键文件,"['lnmp', 'linux', '服务器', 'nginx', '数据库']

摘要由CSDN通过智能技术生成

前端BUG总结-Input是否禁用状态修改

背景

需求：
1.1 listing原有多属性属性值不允许修改
1.2 多属性列表的新增和删除操作保留。且在多属性列表第一行添加删除按钮（即支持删除第一行数据）
！若列表中仅剩一行数据，此时第一行中的删除按钮禁用，不允许再进行删除操作。确保多属性的listing至少存在一行多属性记录
BUG:
2.1 ebay在售listing编辑多属性时，新增的属性应该允许填写属性值
2.2 ebay多属性编辑页面，点击删除后再点新增时，属性对应的输入框被禁用了。—应该在保存之前都允许修改

代码

Version 1
BUG:新增禁用条件，当页面含有itemid时，都禁用，导致BUG1，新增后，input框为禁用的，无法编辑

uniqueArr.forEach((v, i) => {
   
   if (v.propsName) {
   
        this.columns.splice(2, 0, {
   
            title: v.propsName,
            dataIndex: `${
     v.propsName}`,
            render: (text, record, index) => {
   
                const {
    itemId, pageType } = this.state;
                return (
                    <Input
                        disabled={
   (itemId !== 'null' && pageType && pageType !== 'copy'}//新增禁用条件，当页面含有itemid时，都禁用，导致BUG1，新增后，input框为禁用的，无法编辑
                        onChange={
   (e) => this.handleChange(e, v.propsName, index)}
                        type="text"
                        value={
   text}
                    />
                )