Material-ui 4.9.5 TextField属性"required“不工作
Material-UI 是一个流行的前端 UI 框架，提供了许多可重用的组件和样式，用于构建漂亮的用户界面。TextField 是 Material-UI 提供的一个文本输入框组件，可以用于用户输入文本或密码。
关于 TextField 属性 "required" 不工作的问题，这可能是由于以下几个原因导致的：
- 版本不匹配：请确保你使用的是最新版本的 Material-UI，即 4.9.5 版本，因为有时候属性的行为会随着版本更新而改变。可以通过检查你的项目依赖中的 package.json 文件来确认使用的版本。
- 使用方式错误：确认你正确使用了 "required" 属性。在 TextField 组件中，设置 "required" 属性为 true，可以使输入框变为必填项，即用户必须在该输入框中输入内容才能提交表单。例如：
<TextField required label="Username" />- 表单提交问题：如果你在使用 TextField 组件时，将其包裹在一个表单中，并使用表单的 submit 事件进行提交，那么你需要确保表单的 submit 事件中进行了表单验证。可以使用 HTML5 的表单验证属性，或者通过编写自定义的验证逻辑来确保必填字段已填写。
- 样式覆盖问题：有时候，当我们使用自定义样式或覆盖 Material-UI 组件的样式时，可能会影响到组件的默认行为。请确保你的自定义样式没有影响到 TextField 组件的必填字段的显示。
总结： Material-UI 的 TextField 组件的 "required" 属性是用于将输入框设置为必填项的。如果该属性不起作用，你可以检查是否使用了最新版本的 Material-UI，是否正确使用了该属性，是否正确处理了表单提交和验证，以及是否有样式覆盖导致的问题。
关于更多 Material-UI 的使用和相关的其他组件和属性，你可以参考腾讯云提供的文档和示例：
- 腾讯云 Material-UI 文档：https://cloud.tencent.com/document/product/936/30849
- Material-UI 官方文档：https://material-ui.com/
希望以上信息对你有帮助，如果还有其他问题，请随时提问。
相关·内容
我有一个带有‘TextField’属性的简单的必填项。它在html 'input‘元素中生成了’required=‘，因此不会触发所需的错误消息(我相信这是TextField ' required’属性的预期机制)。请参阅下面的代码和codesandbox import React from "react";
import { TextField, Button } from "@material-ui
浏览 54提问于2020-05-02得票数 2
回答已采纳
import React from 'react'; import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlL
浏览 25提问于2020-03-30得票数 1
回答已采纳
我试图将TextField从material-ui传递到react-hook-form控制器，但它作为一个函数返回。导入属性类型并需要对象失败。 import React from 'react';import { TextField, Grid } from '@material-ui/core';
fun
浏览 23提问于2021-04-06得票数 1
回答已采纳
您可以通过提供" required“属性来使用mui为必填字段提供的星号，但您只会得到两个星号。
浏览 4提问于2021-04-13得票数 0
我想我必须重写另一个属性，但我没有找到哪个属性。问候import TestComponent from './TestComponent.js'import theme from './core/Button';
import TextField from
浏览 4提问于2019-11-01得票数 2
回答已采纳
> console.log("Request failed", error)); <TextField/> id="outlined-basic"
label="Email Addressbutton>Submit</butto
浏览 23提问于2020-09-10得票数 0
回答已采纳
1回答
";import DeleteIcon from "@material-ui/icons/Delete";import { makeStyles } from
浏览 2提问于2019-10-16得票数 4
回答已采纳
3回答
我有两个文本字段和一个使用Material-UI的按钮，我想要实现的是当我单击按钮时清除文本字段的内容，但我不知道如何做到这一点，我是新的反应-JS。这是我的代码：import RaisedButton from 'material-ui/RaisedButton';
expor
浏览 3提问于2017-11-07得票数 5
"17.0.1""@material-ui/core"："5.0.0-beta.0""@material-ui/lab"："5.0.0-alpha.39"：“react”
我试图按如下方式设置LocalizationProvider的LocalizationProvider属性，但无法更改它。import TextField from '@material-ui/co
浏览 6提问于2021-08-05得票数 1
回答已采纳
我尝试在用户输入时操作form对象的状态属性，但似乎不起作用。我尝试在状态中添加另一个在form对象之外的属性，以查看问题是否会持续存在。/store/actions/index'import TextField from'@material-ui/core/TextField</
浏览 10提问于2019-02-02得票数 2
回答已采纳
我知道Autocomplete仍然不是Material-UI的核心库的一部分，但目前仍在观察这样的事情是否可能发生。React from "react";import { Formik, Form } from 'formik';import Auto
浏览 0提问于2019-12-07得票数 19
回答已采纳
1回答
材料UI下拉显示不适当的高度
、、、、
React from "react"; MuiThemeProvider, MenuItem, withStyles,import Select from "react-select";
input: { return <div ref
浏览 4提问于2020-03-11得票数 1
options={options} renderInput={(params) => ( required classes={{ root: classes.labelRootlabel={t('mainRank')}
variant
浏览 3提问于2021-04-08得票数 1
回答已采纳
2回答
我已经看过这个，它尝试了另一种方法，但我也无法让它工作。import { withStyles } from '@material-ui/core/styles';import Button from '@<e
浏览 6提问于2020-08-08得票数 6
回答已采纳
我正在使用Material-UI v1.0.0-beta.40，我想要更改边框颜色和错误文本颜色。
如何做到这一点？
浏览 0提问于2018-04-04得票数 3
4回答
React.useState<DateRange>([null, null])
import * as React from "react";import { DateRangePicker, DateRange, DateRangeDelimiter } from "@material-ui/pickersdate => handleDateCh
浏览 2提问于2020-05-14得票数 3
如果我在设置其他属性之前设置它的属性，它就可以正常工作。我尝试使用箭头函数和其他绑定解决方案，但都不起作用。如果有人能帮我解决这个问题，我会很高兴。/core/styles';import Button from '@material-ui/}
/&
浏览 12提问于2019-04-23得票数 0
/App.css';import { withStyles } from '@material-ui} from "@material-ui/core";import Grid from '@material-ui&
浏览 0提问于2019-05-16得票数 1
回答已采纳
我应该怎么做才能将它们分离成两个单独工作的组件？这是我的密码：import Checkbox from '@material-ui/core/Checkbox'; c
浏览 3提问于2021-06-27得票数 0
回答已采纳
3回答
你可以看到在下面的图像中，我的背景色就像灰色一样，当我显示一个错误时，颜色是白色的，然后那个文本字段的白色被扩展，密码错误显示它看起来不好看，我需要一个像文本字段白色的集合，而不是得到扩展，它的错误显示在灰色背景下 variant="outlined" fullWidth
type={values.hidden
浏览 2提问于2021-05-19得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
