reactjs - Material UI - 复制 "required"文本字段错误消息

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

实际上，更改表单验证时不同浏览器显示的错误的样式相当容易。你的 friend 是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 /> 设置 native HTML 错误样式的方式。组件来自material-ui .

另外，顺便提一下，CSS 有几个伪元素可以帮助您设置输入样式。 :invalid和:valid但这与消息本身无关。

因为这种样式不一致确实让我很烦恼，所以我之前创建了一个 npm为您处理此问题的插件，pretty-form-error它适用于 React 和至少 Angular 1.x.x