代码之家 › 专栏 › 技术社区 › Kumara

根据“禁用js”按钮检查状态

reactjs javascript

Kumara · 技术社区 · 3 年前

单击编辑表单时,我正在检查表单状态。在编辑中,status='Draft'。如果状态为草稿,则按钮被禁用。

  <Button className="btn btn-primary" disabled={location.state.status == 'Draft'} type="button" onClick={() => saveAsDraftInvoice(values)}>
              <i className="mdi mdi-table-edit"></i> Save as Draft
            </Button>

以上代码运行良好。按钮已正确禁用。但当我去添加新记录时,错误说“

TypeError: Cannot read property 'status' of undefined"

检查下面的屏幕截图

原因是,当我编辑表单时,状态是在对象内部。当我去保存新记录时,“状态”未定义。我如何解决这个问题

2 回复 | 直到 3 年前

Obed Parlapiano 3 年前

您可以在每一步检查对象是否存在,以防止尝试访问未定义的值:

disabled={location && location.state && location.state.status == 'Draft'}

如果未定义位置或状态 disabled

Vlad Hnatovskyi 3 年前

status 财产存在。

可在附加条件下完成:
location.state && location.state.status == 'Draft'

或使用可选链接:
location.state?.status == 'Draft'

<Button className="btn btn-primary" disabled={location.state && location.state.status == 'Draft'} type="button" onClick={() => saveAsDraftInvoice(values)}>
              <i className="mdi mdi-table-edit"></i> Save as Draft
            </Button>

或

<Button className="btn btn-primary" disabled={location.state?.status == 'Draft'} type="button" onClick={() => saveAsDraftInvoice(values)}>
              <i className="mdi mdi-table-edit"></i> Save as Draft
            </Button>

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前