Material-UI:如何使用TextField应用输入属性
Material-UI是一个基于React的开源UI组件库，提供了丰富的可重用组件，其中包括TextField组件用于输入表单。
使用TextField组件，可以通过应用输入属性来实现不同的输入需求。以下是一些常用的TextField应用输入属性及其说明：
- label：设置输入框的标签文本。
- variant：设置输入框的样式变体，可选值为outlined、filled和standard。
- fullWidth：设置输入框是否占据父容器的全部宽度。
- disabled：设置输入框是否禁用。
- placeholder：设置输入框的占位符文本。
- value：设置输入框的初始值。
- onChange：设置输入框值发生变化时的回调函数。
- error：设置输入框是否显示错误状态。
- helperText：设置输入框的辅助文本，通常用于显示错误信息或提示信息。
- autoFocus：设置输入框是否自动获取焦点。
TextField组件的应用场景非常广泛，可以用于表单输入、搜索框、评论框等各种输入需求的场景。
在腾讯云的产品中，可以使用Serverless Framework配合云函数（云函数是腾讯云提供的无服务器计算服务）来快速搭建一个基于Material-UI的前端应用。Serverless Framework是一个开源的工具，用于帮助开发者在云端构建、部署和管理无服务器架构的应用。
腾讯云云函数产品介绍链接地址：https://cloud.tencent.com/product/scf Serverless Framework产品介绍链接地址：https://cloud.tencent.com/product/sls
相关·内容
1回答
材质UI自动完成下拉定位
、、、
是否有任何简单的方式来定制资料UI自动完成，以便它的Popper下拉可以定位相对于文本光标(类似于VS代码智能感知下拉列表)？我有一个多行Textfield组件作为输入字段。
代码如下所示：
import React from "react";
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Autocomplete from
浏览 1提问于2021-01-25得票数 2
在我的React应用程序中，我有一个输入，可以从下拉列表中获取值。对于这一点，我使用material自动完成和TextField组件。
问题：如何在不从下拉列表中选择的情况下单击按钮来设置输入值？例如，我想从这个例子中设置“教父”，这个值应该在输入中直观地看到。
import React from "react";
import Autocomplete from "@material-ui/lab/Autocomplete";
import { TextField, Button } from "@material-ui/core";
ex
浏览 6提问于2020-01-17得票数 23
回答已采纳
我有一个简单的反应代码。有一个material-ui文本字段。 当我在文本框中单击以输入数据时，屏幕会抖动。在我输入完数据后，我在外面点击，方框，屏幕摇动。请帮我解决这个屏幕抖动的问题。非常感谢。 import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react&#
浏览 20提问于2019-09-11得票数 3
回答已采纳
我使用的是Material Ui Autocomplete组件。所以，如果你在那个框上写了一些东西，然后点击输入字段之外的任何地方，你的输入字段文本就被清除了，我能解决这个问题吗，out.How？ import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete';
export defau
浏览 43提问于2021-08-14得票数 2
9回答
我想要更改Material-UI的TextField的浮动标题的颜色。
正如文档中所述，我将对象颜色作为floatingLabelStyle传递
<TextField floatingLabelStyle={{color: somecolor }} />
但这适用于标签的两种状态-在输入上方和输入上悬停，而焦点模糊时，标签应该是灰色的。
我猜我正在重写某种CSS转换，但是我不知道如何让它工作。有什么建议吗？
浏览 8提问于2016-03-04得票数 19
我的App.js有以下代码：
import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import CardMedia from '@material-ui/core/CardMedia';
import { withStyles } from '@material-ui/core/styles';
import CardActionArea from '@material-ui/c
浏览 0提问于2019-05-16得票数 1
回答已采纳
我必须创建一个评论应用程序。我已经创建了一个登录页面，我在其中输入名称并点击提交按钮，以移动到另一个页面，在那里我必须进行一些评论。我想使用登录页面上输入的名称，以便在评论页中与我的评论一起使用。我想知道如何在点击submit按钮时将输入名称发送到其他组件，并在评论页面上使用该名称。
我的登录页面是：
import React, { Component } from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from
浏览 1提问于2019-01-31得票数 0
我不希望在输入字段中有所选选项的标签:它可能可以在renderInput属性中寻址，但我不知道如何处理。我知道有limitTags属性，但当它被选中时，选项仍然会显示在输入字段中。下面是一个示例代码： 有什么建议吗？ import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@mate
浏览 35提问于2020-10-15得票数 0
回答已采纳
我正在尝试通过扩展material-ui文本字段来创建一个数字输入字段。为此，我需要验证输入值并停止传播无效值。如果输入是有效的，我希望顶级容器组件处理更改事件。但是，如果我为控件提供一个事件处理程序，它就不会冒泡到容器组件。我如何才能做到这一点？
这是我的代码-
我的容器组件-
class ItemsContainer extends Component {
handleItemChange(e)
{
console.log(e.target.value)
//dispatch further redux action
}
render()
{
浏览 10提问于2016-07-23得票数 1
回答已采纳
我想使用Material-UI Next textfield error props ，道具类型是boolean。之前版本的Material-UI props名称为errorText，道具类型为node 。
Textfield Material-使用errorText props的UI早期版本：
<TextField
name='name'
floatingLabelText='Name'
hintText='Type your name'
value={this.state.fields.name}
onChange=
浏览 3提问于2018-03-22得票数 30
回答已采纳
我正在尝试创建一个表单来收集输入以创建事件列表。我使用'value‘属性的方式记录在React文档中： https://reactjs.org/docs/forms.html ，收集用户输入onChange，但material-ui： https://material-ui.com/api/input/ 使用“value”将值设置到输入字段，而不是收集字段中的值。这导致了各种各样的错误，例如。无法输入输入，选取器不显示默认值，不接受值，也无法收集信息。我可以使用指针来指出我哪里错了。感谢您的关注:-) import React from 'react';
import
浏览 10提问于2019-04-15得票数 0
回答已采纳
1回答
我不明白为什么此导入或任何其他导入不起作用：
import * as React from 'react';
import TextField from '@material-ui/core/TextField';
import * as PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
//import { PropTypes } from '@material-u
浏览 1提问于2018-10-09得票数 3
回答已采纳
这是一个用于监控员工的项目，该项目中的第一个界面是注册界面，它位于表单文本字段中，我想将图标放在TextField中占位符的左侧。我尝试了不止一种方法，但都失败了。我该怎么做呢？在这个文件中，我添加了表单，只添加了一个图标SignUp.tsx import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/P
浏览 32提问于2021-04-30得票数 1
回答已采纳
我认为这只是一个简单的任务，但在Material-UI中，如何在Material-UI中为TextField设置不同的字体大小？
以下代码不起作用：
<TextField
name="keyword"
InputProps={{
style: styles.textField
}}
placeholder="Type here"
/>
const styles = {
textField: {
fontSize: 16,
'@media (min-widt
浏览 1提问于2021-01-26得票数 0
我有一个material-ui textField input，我正在将它上的css设置为pointer-events: none，但这并不妨碍用户在输入中输入文本。
我知道我可以添加一个disabled={true}标志，但是如果我可以用CSS来实现这一点，它就会简单得多--而不是添加更多的逻辑、检查道具等等--我可以基于父类禁用它。
如何使用指针事件:没有带有materialUI textField输入的？
浏览 0提问于2018-07-16得票数 1
回答已采纳
我正在使用material-ui在我的react应用程序中呈现TextField组件。它以某种方式强制所有<TextField type="number />使用小数分隔符作为逗号(，)而不是点(.)这对目标用户来说是令人困惑的。
有没有办法强制它始终以点作为小数点分隔符，而不管语言环境如何？
我已经创建了一个。只需尝试输入一个带有小数的数字，然后单击外部，它会将其转换为逗号。这可能是因为我当前的设备区域设置，但我仍然想强制每个人都使用一个点。
浏览 29提问于2019-11-05得票数 7
3回答
使用Reactivewithreact-redux，我正在尝试获取以下登录表单：
import React from 'react'
import RaisedButton from 'material-ui/lib/raised-button';
import TextField from 'material-ui/lib/text-field';
const LoginButton = () => (
<form>
<div>
<TextField hint="E-mail&
浏览 6提问于2016-03-09得票数 3
回答已采纳
我有一个带有表单组件、SubmitButton组件和我的父级(App.js)组件的小应用程序。当用户单击submit按钮时，我希望获取表单组件上的3个字段的值，并将它们传递给我的App.js组件。我不知道如何使用onClick()或其他类似的方法触发事件，以便从表单中获取表单字段值，然后通过props将它们传递给App.js组件并对它们进行console.log()。谁能提供一些指导，因为我是非常新的反应？
App.js
import React from 'react';
import NavBar from './Components/NavBar'
imp
浏览 0提问于2019-06-18得票数 3
回答已采纳
如果执行下面的代码并只输入日期，渲染过程将运行，日期输入将被清除。 此TextField旨在用作此组件的搜索条件。 import * as React from 'react'
import { TextField } from '@material-ui/core';
export const App = () => {
const [loading, setLoading] = React.useState(false)
const [date, setDate] = React.useState()
React.useE
浏览 19提问于2019-04-02得票数 2
回答已采纳
下面是他们的文档示例。我尝试允许用户使用逗号，从下拉列表中选择多个值。 如果输入是Part 1，组件就可以正常工作，但是如果输入是Part 1, Part 2，或者只是简单的1,2，那么组件似乎认为没有选项可供选择。 我试着添加了freeSolo属性，但是没有起作用。 这里发生了什么事？ import * as React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/core/Autoc
浏览 17提问于2021-07-27得票数 0
1回答
我想重写默认的表单输入样式，所以下面是代码。问题是，我想添加表单输入的error behaviour，但我不知道如何添加。当输入处于错误状态时，有人能帮助我在输入中添加红色边框吗？非常感谢!
import React from 'react';
import { withStyles } from 'material-ui/styles';
import TextField from 'material-ui/TextField';
const styles = theme => ({
textFieldRoot: {
pad
浏览 0提问于2018-03-20得票数 1
回答已采纳
当用户按下键盘输入键时，我想传递TextField值。在onChange()事件中，我正在获取textbox的值，但是当按下enter键时，如何获得该值？
代码：
import TextField from 'material-ui/TextField';
class CartridgeShell extends Component {
constructor(props) {
super(props);
this.state = {value:''}
this.handleChange = this.handleC
浏览 9提问于2017-04-13得票数 116
回答已采纳
每当我在字段中输入一个字符时，焦点就会消失。我该如何纠正它呢？
"use strict"
import React from "react";
import createReactClass from "create-react-class";
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import {Card, CardActions, CardHea
浏览 0提问于2018-01-19得票数 4
我需要将占位符字体粗细设置为400，输入字体粗细设置为600，但它不起作用。我在这里寻找解决方案，但都没有奏效。文档中没有提到如何做到这一点。求求你救命！
import React from "react";
import { TextField, makeStyles } from "@material-ui/core";
const useStyles = makeStyles(() => ({
input: {
fontWeight: 600,
"&::placeholder": {
font
浏览 2提问于2020-09-10得票数 0
我正在尝试使用我的自定义颜色的AppBar标题。AppBar的标题是“我的应用程序栏”。我使用白色作为我的主题色。它对工具栏很有效，但AppBar的“标题”也使用了相同的“白色”颜色。
下面是我的代码：
import React from 'react';
import * as Colors from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from &#
浏览 3提问于2016-08-25得票数 39
在刚刚下载、安装并运行create-react-app- with -typescript之后，我一直在尝试各种组件。当我使用以下几行代码添加一个带有hintText的TextField时：
import TextField from 'material-ui/TextField';
和
<TextField hintText="Hint Text"/><br />
<Typography variant="display1" gutterBottom>
Material-UI
</T
浏览 0提问于2018-03-20得票数 0
1回答
抽屉打不开
、、、
晚上好。我有一个我认为很容易解决的问题，但我不能解决它，因为我只是react的初学者。问题是，我放在应用程序栏中的抽屉打不开，控制台上也没有关于它的错误，所以我需要你们的帮助。附言:很抱歉我的英语不好，我是巴西人。
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import
浏览 7提问于2018-01-06得票数 1
我正在使用redux-form创建身份验证表单。 import React from 'react';
import Button from '@material-ui/core/Button';
import PropTypes from 'prop-types';
import { Field, reduxForm } from 'redux-form';
import Grid from '@material-ui/core/Grid';
import TextField from '../../c
浏览 27提问于2019-03-18得票数 0
回答已采纳
当使用material-ui TextField时，我希望TextField是裸体的(没有下划线)。我确实知道在material-ui中使用InputBase可以实现这一点，但我需要使用TextField API来实现这一点，但我在API指南中没有找到实现方法。
浏览 1提问于2019-09-13得票数 33
回答已采纳
我有几个输入字段(TextField)，我想添加一些aria-*属性以实现可访问性。 我正在尝试这样做： const props = {
InputProps: {
'aria-label': 'myAriaLabel'
}
}
// ...
<TextField {...props}></TextField> 但Material-UI最终将该属性应用于生成的包装div。类似于： <div aria-label="myAriaLabel"><input /></div&g
浏览 19提问于2019-02-12得票数 3
回答已采纳
我想在React.js的Material UI中显示Autocomplete TextField组件的默认值。从用户配置文件自动加载的预填充值，可以使用列表中的其他值进行更改。 下面是我的代码： import React from 'react';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
export const ComboBox =() => {
re
浏览 10提问于2020-04-15得票数 6
回答已采纳
我有以下联署材料：
import TextField from '@material-ui/core/TextField/TextField';
<Col xs={6}>
<TextField
pattern=".{3,}"
name="fullName"
label={intl.formatMessage(messages.fullNam
浏览 2提问于2019-03-03得票数 0
我希望只允许在Material-UI TextField中输入特定字符。我已经看到了我尝试过的不同的例子，但我不能让它们中的任何一个工作。在我的最后一次尝试中，我把所有的东西都减少到最低限度，并得到了这个 <TextField
inputProps={{ pattern: "[a-z]" }}
/> 似乎这种模式只是被忽略了。 这仍然是应用模式的有效方法吗？ 感谢所有能帮助我的人
浏览 8提问于2019-03-20得票数 12
在我们的react-admin应用程序中，首先显示一个产品列表。 在每一行上，我们还显示一个TextField (允许用户输入份数)和一个“打印”按钮。 代码片段如下： export const ProductList = props => (
<List filters={<ProductFilter />} exporter={false} {...props} >
<Datagrid rowClick="edit" >
<TextField source="id" />
浏览 11提问于2019-12-11得票数 2
回答已采纳
我已经建立了一个表单，用户可以填写和发送通过发送按钮(见下面的代码，在最后的按钮)。它工作得很好，但是当用户点击发送时，用户发送的输入就消失了(所以用户可能会认为发送不起作用，尽管它确实起作用了)。
我的解决方案非常简单，就是在按钮上添加一个href="/xxx“。该href可以工作，但如果它在按钮中，则当用户单击send时不会发送表单。
有人知道如何在一个按钮或另一种方式中使用这两个函数(发送表单和href)来解决这个问题吗？
import React, { Component } from 'react'
import * as emailjs from '
浏览 0提问于2021-03-19得票数 0
我已经开始使用material-ui，但是我遇到了所有文本字段的问题，当我从web复制并粘贴示例时，它们不能很好地呈现 我安装了： yarn add @material-ui/core
yarn add fontsource-roboto
yarn add @material-ui/icons
yarn add @material-ui/lab
yarn add @material-ui/pickers
yarn add @date-io/date-fns@1.x date-fns
yarn add @material/react-text-field 看不到“'Required *
浏览 77提问于2020-09-27得票数 0
回答已采纳
我想返回前两个数组的列表，列表中的每个成员都将有输入，并且我想给每个输入一个唯一的索引，以知道如何识别它。
我得到以下错误：
Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
我想这是因为我在返回值中使用了useState，但是我不知道如何给每个输入一个索引。
import React from 'react';
import { makeStyles } from '@material-ui/
浏览 0提问于2021-04-02得票数 1
我仍然是ReactJS的初学者，需要为我的工作构建一个动态表。
在该表中，用户可以添加新行，也可以删除任何现有行。
问题是，我不知道如何保存输入到新字段中的值。我的onChange函数不能工作，我已经做了几个测试，但是我无法保存输入的值。
这是我输入到中的代码。
你能告诉我我在保存输入的值时做错了什么吗？提前谢谢你。
import React from "react";
import "./styles.css";
import List from "./List/List";
const App = () => {
浏览 4提问于2021-08-24得票数 0
回答已采纳
1回答
我正在尝试在react应用程序中创建动态输入字段(使用Material UI)，只需单击一个按钮。每当单击add按钮时，它都会在对话框中创建一个新的输入字段，但我似乎无法在文本字段中输入任何值。以下是我的app.js文件- import React from "react";
import "./styles.css";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
impor
浏览 11提问于2021-01-03得票数 4
回答已采纳
我在一个应用程序中使用了ReactJs，并且我需要添加针对所有字段的验证。 我想添加针对姓名，电话号码，电子邮件，密码和确认密码的验证。 当任何人在这些字段中输入一些无效数据时，验证消息应该与字段一起显示。 import React from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@materi
浏览 25提问于2020-03-30得票数 1
回答已采纳
2回答
我对React非常陌生，我正在使用material(ui)制作我的第一个应用程序，我已经成功地呈现了我想要的组件，但我还无法打印它们，它们按行显示：
我尝试用div和p包装它们，得到了相同的结果。
这是我的组件的代码：
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import classNames from 'classnames';
import PropTypes from 'prop-typ
浏览 0提问于2019-01-02得票数 0
回答已采纳
1回答
我在应用程序中使用ReactJ，我需要验证/验证我的应用程序用户。
我想通过redux-saga库为用户验证添加一些逻辑。
当任何人输入一些无效数据时，应该用字段显示验证消息。
import React from 'react';
import history from './history';
import Avatar from '@material-ui/core/Avatar';
import Button from '@material-ui/core/Button';
import CssBaseline from &
浏览 2提问于2020-05-13得票数 0
回答已采纳
3回答
我有两个文本字段和一个使用Material-UI的按钮，我想要实现的是当我单击按钮时清除文本字段的内容，但我不知道如何做到这一点，我是新的反应-JS。
这是我的代码：
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
export default class CreateLinksave extends React.Component {
浏览 3提问于2017-11-07得票数 5
我正在使用一个名为react-payment-inputs的库来接受信用卡号码。该库提供了可用于处理信用卡输入的input getter props。 我可以通过如下简单的输入使用getter prop方法：<input {...getCardNumberProps()} />。 但是，在对TextField执行相同的操作时，我从库中得到了一个错误：Object.formatCardNumber处的Error: Cannot read property 'match' of undefined 下面是显示该问题的代码。 import React from "
浏览 33提问于2021-05-08得票数 1
回答已采纳
3回答
在模块对话框中，我想更改输入值(#quaggaIsbn)的值。我尝试了document.getElementById("quaggaIsbn").value = result.codeResult.code，但它没有反映到表单发送到服务器的值。如何更改Formik发送到服务器的值？ ? NewProjectDialog.js import React from 'react';
import PropTypes from 'prop-types'
import { Formik, Field, Form } from 'form
浏览 72提问于2020-04-19得票数 5
回答已采纳
7回答
我正在尝试将Formik与Material-UI文本字段一起使用。如下所示： import TextField from '@material-ui/core/TextField';
import {
Field,
FieldProps,
Form,
Formik,
FormikErrors,
FormikProps
} from 'formik';
import React, { Component } from 'react';
interface IMyFormValues {
firstName: stri
浏览 152提问于2018-08-31得票数 24
回答已采纳
1回答
我目前正在为一个应用程序开发几个表单，并选择使用Material、和React 来构建它们。基本函数正在工作，这意味着只有当所有所需的输入都被填充并且得到所需的数据时，我才能继续工作。
不幸的是，我无法使用React Form附带的表单验证或错误消息的显示。它仍然在使用Material 验证，尽管我尽可能接近文档。
以下是我想要做的事：
Form 定义输入的最小和最大长度，输入密码输入的RegEx模式，显示React 的整洁的错误消息。
有些逻辑是有效的，有些则是无效的。你能帮我找出原因吗？提前谢谢你！
import React from 'react';
import { u
浏览 2提问于2020-04-09得票数 0
我想使用来自react-final-form ()的Material UI的TextField。
主要问题是“如何获得values 对象？”
我不能从TextField那里得到它。
结果是：
我已经试过了不同的例子，但都没有用。
我的代码：
import React from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Card from '@
浏览 2提问于2019-02-21得票数 6
回答已采纳
我正在构建一个React应用程序，我想使用material-ui框架。
我构建了一个带有文本字段和按钮的组件，但我无法单击文本字段，也无法单击按钮。
以下是组件代码：
import React, { Component } from 'react';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
class Descarcare extends React.Component {
const
浏览 4提问于2021-09-15得票数 0
3回答
我在TextField组件中使用с而不是自定义标签。样式不适用于组件中的标签。我做错了什么？
import React, { PureComponent } from 'react'
import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
const StyledTextField = withStyles({
root: {},
浏览 0提问于2019-04-09得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
