未在React窗体TextField中填充初始值
是指在使用React框架开发的窗体中的TextField组件没有设置初始值。TextField组件通常用于接收用户输入的文本内容。
在React中，可以通过在TextField组件的value属性中设置初始值来填充文本框。例如，可以将value属性设置为一个状态变量，或者从父组件传递一个初始值作为props。
未填充初始值可能会导致以下问题：
- 用户打开窗体时，文本框可能是空白的，没有任何提示或默认值。
- 如果用户需要编辑一个已有的文本内容，他们可能需要手动清空文本框并重新输入，而不能直接修改已有的内容。
为了解决这个问题，可以采取以下方法之一：
- 使用React的状态管理机制，如useState钩子，将初始值存储在状态变量中，并将该变量作为TextField组件的value属性的值。 示例代码：
- 使用React的状态管理机制，如useState钩子，将初始值存储在状态变量中，并将该变量作为TextField组件的value属性的值。 示例代码：
- 如果初始值是从父组件传递的props中获取的，可以直接将该props作为TextField组件的value属性的值。 示例代码：
- 如果初始值是从父组件传递的props中获取的，可以直接将该props作为TextField组件的value属性的值。 示例代码：
React的TextField组件是Material-UI库中的一个组件，用于创建文本输入框。它具有丰富的属性和功能，可以根据实际需求进行定制。更多关于TextField组件的信息和使用方法，可以参考腾讯云的官方文档： 腾讯云TextField组件介绍
相关·内容
当我尝试使用Material UI创建自动完成标签时，收到以下错误： ? 自动完成的代码如下所示： import React, {useState, useEffect, useContext} from 'react';
import ReactDOM from "react-dom";
import {withStyles} from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import Au
浏览 36提问于2020-03-25得票数 1
我花了几个小时尝试让ReferenceManyField在嵌套的DataGrid中显示一些数据。 <Show {...this.props}>
<SimpleShowLayout>
<TextField source="id" />
<TextField source="name" />
{/* THE FOLLOWING COMPONENT DOES NOT DISPLAY ANY DATA. WHY NOT??? */}
<ReferenceManyField la
浏览 6提问于2021-05-07得票数 0
回答已采纳
1回答
有一个从VerticalLayout继承的baseview类，其中的TextField和工具提示是通过绑定到TextField来创建的。在从Dialog继承的类中使用baseview时，不显示工具提示。
示例:更新:将示例更新为更轻量级的示例
@Route(value = "Future", layout = MainLayout.class)
@RouteAlias(value = "/Future", layout = MainLayout.class)
public class FutureView extends VerticalLayout {
浏览 26提问于2021-06-08得票数 1
一位同事(比我更有经验的React )在mui的TextField控件周围编写了这个react包装器组件，它并没有像我预期的那样工作，但我不知道为什么。所以我最终创建了一个沙箱(下面的链接)来使用本机沙箱，看看它是否工作，它确实工作了。 我想知道的是，为什么在安装消费者组件时包装器不显示数据，而本机mui文本字段却显示数据呢？加载Example.tsx时，原生mui文本字段将按预期在json中显示数据。当您选择英语或西班牙语时，它会根据所选的语言显示状态(如果没有该语言的数据，则会显示空白，这是应该的)。 自定义文本字段包装没有此行为。一开始是一片空白。当您更改语言时，它也不会显示数据。我刚
浏览 75提问于2021-09-28得票数 0
我正在尝试使用material-ui为我的React表单设计一个表单控件(TextField)。我想要一个TextField来表示传递给我的组件的对象的一个字段“任务”。我有过
const MissionEditView = ({ mission, toListView }) => {
...
const { handleChange, values } = useForm(mission);
const recipientDisplayName = _.get(mission, "recipientDisplayName");
const props
浏览 18提问于2020-05-17得票数 0
回答已采纳
如何将MobileDateRangePicker开始日期修正为当前日期，并且不允许在以下代码中更改它？
import { MobileDateRangePicker, LocalizationProvider } from '@mui/lab';
.....
<LocalizationProvider .....>
<MobileDateRangePicker
startText="Start"
endText="End"
.....
renderInput={(sta
浏览 4提问于2022-03-21得票数 0
1回答
每当状态(称为selectedProduct，其输入字段不包含在Formik标记中)更改时，我需要更改表单字段中的值。我试过：
将我想要的值放入initialValues中(显然不起作用，因为在第一次呈现时我还没有选择自己的selectedProduct )将我想要的值放入formik中每个字段中的" value“道具中。它几乎是有效的: Datepicker获得了正确的值，复选框输入没有得到任何值(idk为什么)，文本字段获得正确的值，但这是由标签覆盖的。这是因为所有字段都没有经过验证。
这就是我所做的，上面的两点是适用的
import React, { useState } fro
浏览 1提问于2021-07-16得票数 1
如何用Formik中的条件在TextField中设置值？基本上，我想选择名称，然后这个名称自动设置为TextField，但我找不到正确的方法来做，谁能请帮助！预先感谢：(())(()())
这是TextField组件
import React from 'react';
import TextField from '@mui/material/TextField'
import { useField } from 'formik';
const TextfieldWrapper = ({
name,
...otherProps
}) =
浏览 12提问于2022-10-05得票数 0
所以，我尝试用Formik和Material UI来创建表单。对于所有字段，一切都正常工作，但问题出在自动完成上。我找不到从localStorage填充字段的方法。我尝试了所有的方法，从赋值道具、inputValue、defaultValue等等，但似乎都不起作用。 import React from 'react'
import { Grid } from '@material-ui/core'
import { Autocomplete } from '@material-ui/lab'
import { Formik, Form, Fie
浏览 32提问于2019-12-09得票数 16
回答已采纳
当选择项时，将引发以下警告：
警告:组件正在将不受控制的输入更改为被控制。这很可能是由于值从未定义的值更改为定义的值，而这种情况不应该发生。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。
最小工作示例
import React, {useState} from "react";
import MenuItem from "@mui/material/MenuItem";
import TextField from "@mui/material/TextField";
export default function Inp
浏览 21提问于2022-07-10得票数 1
回答已采纳
1回答
我用react表单的setValue函数填充了一个表单(我不知道这是否是在编辑模式下设置表单的最佳方式)。
一旦用户触摸到表单，我希望(按一下按钮)将表单恢复到以前设置的状态(请注意，我不想重置它，但是，再次使它恢复到我以前设置的值)
const { register, handleSubmit, watch, reset, errors, setValue } = useForm();
const { id } = useParams()
const { loading, error, data } = useQuery(GET_FBUSER,{
variables: {_i
浏览 3提问于2021-02-04得票数 1
回答已采纳
我想知道如何使用react typescript创建一个评论部分，我希望用户输入一个名称和评论，然后将其发送到我的firebase项目。我也想如果所做的评论可以显示在下面的评论表格，下面的代码是我所能做的一切，我该如何处理这一点
import React, { EventHandler, FormEventHandler, useState, FC } from 'react'
import { Box, Button, Grid, TextField } from '@material-ui/core';
import axios from "ax
浏览 1提问于2021-04-16得票数 0
1回答
我正在经历一个麻烦，使我的反应形式与中心一致。
这是我的表格：
我正在使用reactjs资料用户界面。
<Grid item xs={12}>
<Grid item xs={12}>
<FormGroup noValidate autoComplete="on">
<TextField
label="SSN"
type="number"
浏览 4提问于2019-10-21得票数 0
回答已采纳
我有一个仅在单击另一个单选按钮时呈现的TextField。根据React和Material-UI文档，我应该能够在TextField上使用inputRef={this.myRef}获得对Mui TextField中输入元素的引用。我可以对另一个未切换的TextField执行此操作，但当我尝试刚刚打开的with TextField时，它显示为null。
我尝试使用inputRef={this.otherText}和inputProps={{ref: this.otherText}}，结果相同。
// Start of my class where I do the createRef()
cla
浏览 0提问于2019-01-26得票数 0
如果执行下面的代码并只输入日期，渲染过程将运行，日期输入将被清除。 此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
回答已采纳
1回答
余弦形式初值
、、、
尝试用初始值初始化redux-form，但得到错误。
deleteIn.js:56 Uncaught :无法使用“in”运算符搜索0中的“prizeId”
下面是我的部分代码(生成字段数组)
<Field
className="form-group"
form="createChallenge"
name={`${item}.prizeId`} -> here error comes
valueField='value'
textField='label'
com
浏览 1提问于2017-05-26得票数 0
迁移到Material v4并得到此错误
失败的支柱类型:无效的支柱component提供给Field。在字段中(由TextField创建)
，它指向redux表单字段组件。
export const TextField = props => (
<Field
component={renderTextField}
{...props}
/>
);
我认为这与React.forwardRef在看时有关
尝试过
1.)
Redux窗体在添加时指向forwardRef : boolean [optional]，则该问题会持续
浏览 1提问于2020-09-09得票数 0
回答已采纳
警告:组件正在将不受控制的输入更改为被控制。这很可能是由于值从未定义的值更改为定义的值，而这种情况不应该发生。决定在组件的生存期内使用受控输入元素还是不受控制的输入元素。
我正在创建一个社交媒体应用程序，面对这个问题，我的代码有什么问题？
以下是我的代码：
import { useState } from "react";
import {
Box,
Button,
TextField,
useMediaQuery,
Typography,
useTheme,
} from "@mui/material";
import EditOutl
浏览 8提问于2022-11-27得票数 0
我正在创建一个下拉编辑表单，在该表单中，编辑用户将能够在编辑时看到从props中选择的选项值。我尝试过使用defaultValue并使用selected，但我的条件似乎是错误的。任何建议，我可以用来检查道具的价值，在选项和显示在下拉时，用户单击编辑。
在这里，selectedPropsName是我们从props获得的信息，我想要map并将其显示为所选。
谢谢..。
码
const results = [
{
'Name': 'apple',
'description': 'apple is good
浏览 9提问于2022-04-07得票数 0
回答已采纳
我在SwiftUI中有一个模态表，用于添加记录。模态表使用一个包含多个TextField元素的表单。现在，我想在窗体的末尾添加一些与窗体背景(灰色)相同颜色的空间。
将last ()添加到最后一个TextField将导致所有的TextFields都有一个填充。然后我尝试添加一个文本(“”).hidden().padding(.bottom，500)作为最后一个表单元素，但是空格中填充了白色的背景色。
更新:如果在表单视图中放置一个填充空间(背景为红色以供演示)，结果如下：
这是代码：
import SwiftUI
struct ContentView: View {
var
浏览 3提问于2020-02-20得票数 5
回答已采纳
1回答
物料UI浮动标签
、、
有没有人为material UI和React文本字段找到不自动浮动标签的解决方案
。感谢这是我正在使用它的组件，关键是通过Redux从另一个组件传递，主要数据来自localStorage。在Firefox和Chrome中的结果是相同的：
class UpdateForm extends Component {
state = {
dataTask: ''
};
componentDidMount() {
if (this.props.selectedTask !== null) {
const selectedTaskData = JS
浏览 10提问于2018-08-09得票数 0
回答已采纳
1回答
对于访问React元素或组件，'ref‘是最好的可能方法？在ReactJS中，我们还有其他的选择吗？
<TextField
ref={(elem) => this.textField = elem}
value={value}
{...restProps}
/>
浏览 2提问于2017-03-29得票数 1
回答已采纳
我正在使用'Material UI‘Autocomplete组件在我的窗体中呈现一个下拉列表。然而，如果用户想要编辑一个对象，那么下拉列表应该显示为自动填充从数据库中获取的任何值。 我试着用下面的代码来模拟这种情况 import React, { Component } from 'react';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
export de
浏览 47提问于2019-12-25得票数 5
1回答
我在我的React项目中使用Formik来处理表单和使用MUI组件。
我能选择的日子，月份，但年度部分不变。如果我在textfield中手动键入年份，则未将年份部分反映在已更改的状态中。
这是我的密码：
<LocalizationProvider dateAdapter={DateAdapter}>
<DatePicker
name="birthday"
id="birthday"
浏览 6提问于2022-03-13得票数 4
回答已采纳
我试图设置从道具中获得的新值，而不是用react表单库的TextField更新setValue组件。
问题是，值有时保持为空，有时标签不浮动(收缩)。
Codesandbox (请注意，我在那里为TextField构建了包装器组件)
浏览 2提问于2021-01-07得票数 0
1回答
无法写入文本字段
、、、、
我是react的新手，我正在用react-hook和useState构建一个表单，以便在提交后管理我的数据。 我无法使用文本字段，因为它们被阻止了。我认为我在value/onChange参数中犯了一些错误，但我不知道是哪种类型的错误。 import React, { useState } from "react";
import {
TextField,
MenuItem,
Typography,
Checkbox,
Divider,
Button,
} from "@mui/material";
import { MdError }
浏览 23提问于2021-09-22得票数 0
回答已采纳
我正在使用material-ui创建一个react窗体。 我希望表单是一个固定的2列视图，而不是基于浏览器的大小流动，所以它总是这样： |First Name |Last Name|
|Street Address |City | 而不是像这样结束 |First Name |Last Name| Street Address |City | https://codesandbox.io/s/0q7kw76nyl import React from "react";
import PropTypes from "prop-typ
浏览 34提问于2019-04-24得票数 3
回答已采纳
1回答
我是新的反应，现在我希望能够有一个可重用的组件的日期输入，但我不能从组件的值返回到寄存器。
这是我的表单代码：
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "@mui/material";
import FDate from "../../Components/Forms/FDate";
function AltaArtista() {
浏览 3提问于2021-12-21得票数 0
我有这个部件。
//@flow
import React from 'react'
import { Field } from 'redux-form'
import type { FieldProps } from 'redux-form';
import TextField from 'material-ui/TextField'
const renderField= ({ input, label, disabled, meta: { touched, error } }: FieldProps) => {
//
浏览 0提问于2018-02-05得票数 0
回答已采纳
2回答
我有一个带有TextField的小部件，我正在从一个StreamBuilder中初始化它，尝试使用集团模式。一个接触模型正从溪流中进来。这最初是用来填充TextField的。我的问题是在用户更新TextField并按下保存按钮之后读取值。如何从TextField读取值。我举了一个简单的例子来说明我想做什么。
void getTextValues() {
//???
}
@override
Widget build(BuildContext context) {
return StreamBuilder<Contact>(
stream:
浏览 0提问于2019-04-05得票数 0
回答已采纳
我使用"react-native-material-textfield“作为文本输入。我有一个视图来编辑用户详细信息，它在挂载时从api获取值，并将其设置为状态。但是在将"react-native-material-textfield“升级到"0.16.1”后，在挂载后的文本输入中不会显示原始的名字值。我到底做错了什么？
constructor(props) {
super(props);
this.state = {
firstName: '',
};
}
componentDidMount(props
浏览 18提问于2020-06-28得票数 1
我正在使用Adobe XML创建动态表单，这些表单是从LiveCycle文档自动填充的。不幸的是，我不太熟悉LiveCycle，所以我遇到了一个我无法解决的问题。让我给你一个我想做的事情和我到目前为止已经尝试过的事情的简化版本。
我有一个表，有两列，“歌”和“歌词”。表的每一行包含两个文本字段，一个用于歌曲，另一个用于歌词，这两个字段是从XML文档自动填充的。不幸的是，“歌词”栏中的一些条目太大，因此它们扩展到页面之外。为了解决这个问题，我将每个textField都包装在一个流的子表单中，并选中了“允许上下文中的分页符”选项。
这种方法的问题是两个文本字段不再一起增长。所以，虽然我得到了一个很
浏览 3提问于2011-02-25得票数 0
回答已采纳
目前，我有一个样式的TextField。当我开始键入电子邮件字段时，将出现自动填充选项。如果选择一个自动填充选项，则TextField的背景将变成白色，并带有黑色文本。我想要改变这些风格。
我试过这个：
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import React from "react";
const styles = {
underline: {
&#
浏览 0提问于2019-07-25得票数 6
回答已采纳
我想在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
回答已采纳
在我的域类中，我有一个从表单填充的整数。如果用户输入任何数字，则将对其进行验证，如果用户将输入框留空，则默认初始化为0
到目前为止，我已经完成了第一部分
@NumberFormat(style = Style.NUMBER)
如何将其默认初始化为0？
浏览 0提问于2010-12-03得票数 0
回答已采纳
2回答
在下面的代码中，我很好奇如何设置以下TextField的值。对于本例，如何将TextField设置为下拉列表中选定的项？如果用户在下拉列表中选择“顶级”，那么我希望将TextField填充为“顶级”。下拉列表称为ChildComponent
import * as React from "react";
import ChildComponent from './Operations/ChildComponent';
import { DropdownMenuItemType, IDropdownOption } from 'office-ui-fabr
浏览 3提问于2020-04-01得票数 0
回答已采纳
我正在使用React JS + Material UI核心开发一个Web应用程序。现在，我正在构建一个具有material ui控件的窗体。现在，我正在尝试使用React的ref检索输入字段值(TextField)。它总是说未定义。
这是我的组件
class CreateEventComponent extends React.Component{
constructor(props)
{
super(props)
}
submitCreateEventForm(e)
{
e.preventDefault();
浏览 0提问于2018-07-13得票数 2
3回答
我在一个页面上有两个表单，当一个特定表单中的所有字段都被填充时，我想激活窗体上的一个特定按钮，但是用我的当前脚本，当一个特定的表单字段被填充，而页面上的其他表单的其他字段没有被填充时，按钮仍然是不活动的。
<form method=post id="regis">
<p>Register</p>
<p>
<input name="username" type="text" id="first_name">
<input
浏览 0提问于2015-02-03得票数 0
回答已采纳
我有两种形式需要相互作用。父窗体有4个字段和一个add按钮，该按钮将每个字段的数据保存到类对象的实例中。将对象保存到对象后，该对象存储在列表框中，其子窗体包含该列表框。我创建了一个定制事件来处理这些东西，但我肯定做错了什么。
应该发生的是，当两个窗口都打开，并且列表框中有数据时，从子窗体列表框中选择的任何项都会将来自该对象的数据填充到父窗体字段中。当我测试我的代码时，只有第一个项目有正确的数据填充正确的字段。如果在第一个选择之后单击任何其他项，则主窗体字段根本不会更新。
针对我的问题，子表单有以下代码：
public EventHandler ListBoxItemClicked;
priva
浏览 6提问于2017-02-06得票数 2
回答已采纳
1回答
我是个新手。我试着用react钩子做一个简单的待办事项列表，努力让“删除所有按钮”变得简单。我认为使用setState []或return []是可行的，但它不起作用...而且它还显示了一个错误。 TypeError: tasks.map不是函数 有人知道它是怎么弄明白的吗？ 以下是我的代码 import React, {useState} from 'react'
let INITIAL_TASK = {
title: 'React',
doing: false,
}
const App = () => {
const [
浏览 9提问于2020-06-28得票数 0
回答已采纳
我有一个包含主窗体的Add.js。我有一个CheckboxesTags.js，它是一个函数组件。我需要在Add.js中获取选定的CheckboxesTags.js项，以便通过axios与其他值一起发送。我添加了<CheckboxesTags onChange={(e)=>{console.log(e.currentTarget);}} />，但无法获取值。
Add.js：
import React, { Component } from 'react';
import CheckboxesTags from './CheckboxesTags'
浏览 4提问于2020-03-06得票数 0
1回答
据推测，我应该使用FormEvent作为表单中的submit事件类型。
但是，该类型不识别一系列值。它只识别一个值(即。e.target.value而非e.target.value).
对于表单中的submit函数，我应该使用什么类型来迭代我的表单值？
import * as React from 'react';
import {ChangeEvent, FormEvent, useState} from "react";
export default function Test() {
const [input1, setInput1] = u
浏览 2提问于2022-01-10得票数 8
在我的React Signup组件中是一个表单，用户可以在其中输入他们的电子邮件、密码和密码确认。我正在尝试使用jest/react- test -library编写测试，但是我一直收到测试失败的消息，因为接收到的函数调用数为0，而预期调用数为1。
我尝试过Jest匹配器的变体，例如.toHaveBeenCalled()、.toHaveBeenCalledWith(arg1，arg2，...)、toBeCalled()，所有这些匹配器仍然期望1或更大的值，但都失败了，因为接收到的数字是0。我已经尝试了fireEvent.click和fireEvent.submit，它们仍然失败。
Signup
浏览 23提问于2019-11-07得票数 6
我试图通过组件"Feed“传递一个数组，并相应地对其进行重构和映射。问题是，当我传递一个数组时，我会收到一个错误信息
"Feed.js:5 Uncaught : allPosts.map不是函数“
我知道我正在传递一个数组，因为我通过console.log测试了我的console.log变量，而且我知道我的提要组件很好，因为如果传递了一个具体的数组，它就能工作。有人能找到并向我解释这个问题吗。
饲料/js
import React from "react";
const Feed = ({ allPosts }) => {
return (
浏览 7提问于2022-08-02得票数 0
回答已采纳
2回答
我从这个例子中学到了这一切。
所以我不能接受任何荣誉。然而，这个页面工作得很好。我正试着把它改造成一个React Video Player页面。
我的代码如下(摘自Axios Post)：
if (response.status == 200) {
console.log("Login successfull");
var videoPlayer = [];
this.setState( {isLoggedIn : true });
videoPl
浏览 2提问于2018-05-05得票数 0
我使用Muse Antd设计模板与antd版本的"antd": "^4.16.6"。
我有一个蚂蚁设计表单，在提交表单以编辑现有记录之前，我正在填充数据。
currencyConversionById是我要编辑的对象/记录。其结构如下：-
currencyConversionById = {
base_currency : "USD",
base_amount : 1,
to_currency : "CAD",
to_amount : 2.45
}
currencyL
浏览 1提问于2022-06-07得票数 0
2回答
如果这只是一个重复，我是新的反应，所以道歉-我试着寻找其他问题的解决方案，但没有一个帮助我。
当页面的查询字符串发生变化时，我想要一个React组件重新呈现。我有一个基本的联系人表单，我正在使用通过查询字符串传递的值预填充一个字段。我的理解是，无论组件的状态发生变化，如果查询字符串是道具的一部分，它都应该重新呈现一个组件(这个)。然后，我认为这会很容易，但这似乎不是我的情况。
路由
<Route exact path="/contact-us" component={ContactUs} />
组件
import React, { PureComponent, Fr
浏览 0提问于2018-06-27得票数 6
我目前使用的是
<TextField onChange={e => this.change(e, items)}
我在TextField中输入的每一个字母都会触发，因此，我输入的文本会以慢动作填充。我在想，一旦用户输入了所有内容并转移了注意力，那么这个请求就会更好。在使用React & Material UI TextField的场景中，我可以使用哪种类型的事件？
浏览 0提问于2019-02-01得票数 4
回答已采纳
我是ReactJS的初学者，我正在使用materia创建一个页面。
我需要在TextField上做一个定制，当输入字段中填充了一些文本时，我想要更改font-size。当我更改字体大小时，在标签和输入字段的边框底部之间有一个非常大的空间。因此，只有当输入字段被填充时，我才需要更改font-size。
你能告诉我怎么做吗？
这是我输入的代码
import React from "react";
import * as S from "./styles";
export default function App() {
return (
<d
浏览 12提问于2022-08-23得票数 2
1回答
我有defaultValue.In defaultValue的react文本字段，我用属性设置值。但是我需要将onchage()事件设置为该文本字段，这样我就可以更新我的TextField值。但我不能设置它们。当我尝试设置一个值时，我的默认值没有显示。
const [openingHours, setOpeningHours] = useState({
monday: '',
});
const mondayHandler = (event) => {
浏览 1提问于2021-10-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
