Question

我在React的Material UI中有一个简单的TextField组件（注意“必填”）

<TextField
    label="Last name"
    name="lastName"
    required
    value={this.state.lastName}
    onChange={this.handleChange}
/>

我喜欢“必需”属性的功能和外观。激活后看起来像这样：

不幸的是，此属性仅在其TextField组件上可用，而在RadioGroup或Select组件上不可用。如果我至少可以复制外观（也许它会将页面滚动到输入的位置这一事实），则可以将其应用于所有输入，以实现一致的UI。

有人知道他们从哪里得到外观吗？看起来可能是来自其他包装。找到它的任何帮助将不胜感激。

Answer 1

这实际上是来自香草html的输入的属性。文本字段由较小的组件组成，而输入是它们使用的组件之一。 required属性将触发对话框出现。

<html>
    <body>
        <form>
              Username: <input type="text" name="username" required>
              <input type="submit">
        </form>
    </body>
</html>

此代码段也将产生相同的消息。

Answer 2

实际上，更改表单时，更改各种浏览器显示的错误的样式非常容易。这里的朋友是Constraint API。

有一个invalid事件将在提交表单之前触发，该事件将检查具有required属性的元素是否满足其约束条件。

我通常要做的是使用onInvalid事件处理程序并传递一个回调，您可以在其中获取有关验证的大量信息。

例如，在event.target.validationMessage中，您会看到“请填写此字段”，或者event.target.validity.valid会告诉您该元素是否有效。请记住，您必须preventDefault event。

e.preventDefault(); setInvalid( e.target.validity.valid ); setMessage( e.target.validationMessage );

这就是我使用<SnackbarContent />中的material-ui组件设置本机HTML错误的样式。

此外，仅提及CSS有几个伪元素，它们可以帮助您设置输入的样式。 :invalid和:valid，但这与邮件本身无关。

因为这种样式不一致确实困扰了我一段时间，所以我创建了一个npm插件来为您处理，pretty-form-error可以与React以及至少Angular 1.x.x一起使用

Answer 3

如果您指的是“请填写此字段”，则可能是特定于浏览器的功能，而不是“实质性”功能...您是否检查过其他浏览器以查看此行为是否可重现？

材质用户界面-复制“必填”文本字段错误消息

3 个答案: