时间戳

首页 > 解决方案 > SemanticUI Form.Input 类型的电子邮件和电话添加了 aria-invalid 属性

reactjs - SemanticUI Form.Input 类型的电子邮件和电话添加了 aria-invalid 属性

问题描述

我正在更新一个基本表单，其中所有输入都是“文本”类型，以便它们具有正确的type属性集，当它用于电子邮件时type="email"，当它用于电话号码时，type="tel"。

反应组件：

    <Form.Input
      disabled={disabled ? true : false}
      id={field.name}
      placeholder={formattedName(field.name) || undefined}
      value={values[field.name]}
      onChange={handleChange}
      onBlur={showErrors ? validate : undefined}
      error={showErrors ? errors[field.name] : null}
      required={required || undefined}
      label={formattedName(field.name) || undefined}
      type="email"
    />

但是，生成的 HTML 输出似乎添加了一个aria-invalid=true属性：

<div class="disabled required field">
  <label for="email">Email</label>
  <div class="ui disabled input">
    <input **aria-invalid="true"** placeholder="Email" required="" id="email" disabled="" type="email" tabindex="-1" value="plucks@gospotcheck.com">
  </div>
</div>

SemanticUI 为什么要这样做？如果我使用平原<Input />它很好，但我宁愿不走这条路。

标签： reactjssemantic-uisemantic-ui-react

解决方案

在 1 个 repo 中，我们有上面的 error: 代码error={showErrors ? errors[field.name] : null}，我将其复制到新的 repo 中。但是，似乎null并没有让它快乐，所以我改为error={showErrors ? errors[field.name] : undefined}

推荐阅读