我在React的Material UI中有一个简单的TextField组件（注意“必需”）
<TextField
label="Last name"
name="lastName"
required
value={this.state.lastName}
onChange={this.handleChange}
/>我喜欢“required”属性的功能和外观，当它被激活时看起来是这样的：
遗憾的是，此属性仅在其TextField组件上可用，而RadioGroup或Select组件上不可用。如果我至少可以复制外观（也许还可以复制它将页面滚动到输入位置的事实），我就可以将它应用到我所有的输入中，以获得一致的UI。
有没有人知道他们是从哪里得到的外观？看起来可能是从不同的包。任何帮助找到它将不胜感激。
3条答案
按热度按时间643ylb081#
如果您指的是“请填写此字段”，这看起来可能是浏览器特定的功能，而不是材料功能......您是否检查过其他浏览器以查看此行为是否可重现？
jutyujz02#
实际上，更改表单验证时不同浏览器显示的错误样式是相当容易的，这里您的朋友是Constraint API。
在表单提交之前将触发一个
invalid事件，该事件检查具有required属性的元素是否满足其约束。我通常做的是使用
onInvalid事件处理程序并传递一个回调函数，从中可以获得大量有关验证的信息。例如在
event.target.validationMessage中你会看到“请填写这个字段”或者event.target.validity.valid会告诉你这个元素是否有效。记住你必须preventDefaultevent。e.preventDefault(); setInvalid( e.target.validity.valid ); setMessage( e.target.validationMessage );这就是我使用
material-ui中的<SnackbarContent />组件对原生HTML错误进行样式化的方式。另外，CSS有两个伪元素，可以帮助您设置输入的样式。
:invalid和:valid，但这与消息本身无关。因为这种风格的不一致真的困扰着我一段时间前，我创建了一个
npm插件来处理这个问题，pretty-form-error它与React和至少Angular 1.x.xnwo49xxi3#
这实际上是来自vanilla html的input的一个属性。Textfield由更小的组件组成，Input是它们使用的组件之一。required属性将触发对话框出现。
这个代码段也将产生相同的消息。