Material UI - 复制“必需”文本字段错误消息
Jac*_*nak 6 reactjs material-ui
我在 React 中有一个来自 Material UI 的简单 TextField 组件（注意“必需”）
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>
我喜欢“必需”属性的功能和外观。激活后看起来像这样：
不幸的是，此属性仅在其 TextField 组件上可用，而在 RadioGroup 或 Select 组件上不可用。如果我至少可以复制外观（也许它会将页面滚动到输入位置的事实），我可以将其应用于所有输入以获得一致的 UI。
有谁知道他们的外观是从哪里来的？看起来它可能来自不同的包。任何找到它的帮助将不胜感激。
实际上，更改表单验证时不同浏览器显示的错误的样式相当容易。这里你的朋友就是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.
另外，顺便提一下，CSS 有几个伪元素可以帮助您设置输入样式。:invalid但这:valid与消息本身无关。
因为这种样式不一致确实困扰了我一段时间，所以我创建了一个npm插件来为你处理这个问题，pretty-form-error它适用于 React 和至少 Angular 1.xx
这实际上是 vanilla html 输入的一个属性。Textfield 由较小的组件组成，Input 是它们使用的组件之一。所需的属性将触发对话框出现。
<html>
<body>
<form>
Username: <input type="text" name="username" required>
<input type="submit">
</form>
</body>
</html>
该片段也将产生相同的消息。
| 归档时间： |
|
| 查看次数： |
14683 次 |
| 最近记录： |