reactjs - Material-ui 4.9.5 TextField 属性“必需”不起作用
问题描述
我有一个带有“必需”属性的简单 TextField。它在 html 'input' 元素中生成了 'required=""',因此不会触发所需的错误消息(我相信这是 TextField 'required' 属性的预期机制)。请参阅下面的代码和代码框
import React from "react";
import { TextField, Button } from "@material-ui/core";
export default function App() {
return (
<div className="App">
<TextField required label="LoftyPine" />
<Button variant="contained" onClick={() => {}}>
Validate
</Button>
</div>
);
}
解决方案
为了触发浏览器默认需要的错误信息,TextField
需要在表单中,并且需要触发验证。有几种方法可以触发验证,例如单击按钮type="submit"
或在表单上调用reportValidity。
这是一个显示调用的示例reportValidity
:
import React from "react";
import { TextField, Button } from "@material-ui/core";
export default function App() {
const formRef = React.useRef();
return (
<div className="App">
<form ref={formRef}>
<TextField required label="LoftyPine" />
<Button
variant="contained"
onClick={() => formRef.current.reportValidity()}
>
Validate
</Button>
</form>
</div>
);
}
推荐阅读
- php - 从 php 中的嵌套对象访问值
- git - .gitignore 除了
- python - 用于将字典值转换为单独字典的单行
- node.js - MacOS Catalina - 节点快速应用程序 - http localhost 服务器失败
- html - 如何水平翻转 SVG?
- google-analytics - Google Data Studio:如何计算特定事件的数量
- python-3.x - 我发明了一种数据加密方法。我想知道它是否安全
- python - 我的 exactOneOdd 函数有一些问题
- python - Firestore AttributeError:模块“firebase_admin”没有属性“firestore”
- c# - 使用 iText 7 查找我添加到 PDF 中的文本