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

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

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

背景

  1. 需求:
    1.1 listing原有多属性属性值不允许修改
    1.2 多属性列表的新增和删除操作保留。且在多属性列表第一行添加删除按钮(即支持删除第一行数据)
    !若列表中仅剩一行数据,此时第一行中的删除按钮禁用,不允许再进行删除操作。确保多属性的listing至少存在一行多属性记录
  2. 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}
                    />
                )
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值