为什么我键入时React文本/输入字段中没有显示任何内容？
在React中，当你在文本/输入字段中键入内容时，如果没有显示任何内容，可能是由于以下几个原因：
- 组件状态未正确更新：React中的组件是基于状态（state）来渲染的。如果你在文本/输入字段中键入内容，但没有在组件的状态中更新相应的值，那么文本/输入字段将不会显示任何内容。你可以使用
setState方法来更新组件的状态。 - 事件处理函数未正确绑定：在React中，你需要为文本/输入字段绑定相应的事件处理函数，以便在用户键入内容时触发更新。例如，你可以为文本字段绑定
onChange事件，并在事件处理函数中更新组件的状态。 - 组件未正确渲染：确保你的组件正确渲染了文本/输入字段，并且设置了正确的属性和事件处理函数。例如，对于文本字段，你需要使用
<input>元素，并设置value属性来显示文本内容。 - 样式问题：检查文本/输入字段的样式是否正确设置。有时，文本/输入字段可能被其他元素或样式覆盖，导致无法显示内容。
如果你遇到了以上问题，可以逐一检查并排除可能的原因。另外，React有一个强大的社区和文档支持，你可以参考React官方文档（https://reactjs.org/）和相关教程来获取更多帮助和解决方案。
相关·内容
4回答
来自EventListener的ReactJS事件不更新视图
javascript、reactjs、dom、webview
我基本上是在尝试使用事件侦听器，并为'message‘事件添加一个事件，当此应用程序是某个移动应用程序中的webview时，该事件将获取外部事件。
问题是，当事件传入时，react组件不会更新。我可以确定事件确实进入了我的事件侦听器函数，但是，从字面上讲，即使我执行setState，react组件也不会更新。
下面是我的代码：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
浏览 0提问于2017-04-22得票数 1
3回答
映射React Native时更新输入值
react-native
我正在创建react-native mobile应用程序。我有一个带有一些值的数组。我想在输入字段中设置数组的值。我已经在字段中添加了值，但我无法更新这些值。我在一个qty变量中设置了如下值：
constructor(props) {
super(props);
this.state = {
qty:[],
}
}
componentWillMount() {
var ids = [];
this.props.data.map((dataImage,Index) => {
dataImage['pro-name'] != undefi
浏览 7提问于2018-02-02得票数 2
1回答
无法根据另一个组件的状态获取要呈现的组件的复选框
javascript、reactjs、react-native
在我的组件做了更新，我console.log this.state.checkedTeams和this.state.checked。这些值是通过componentDidUpdate中的映射确定的。他们读的是他们应该读的东西。 然而，当我通过控制台将这些值记录在渲染的一侧时，我得到了空数组。 当我尝试在componentDidUpdate中设置状态时，我超出了最大深度并抛出错误。 这样做的目的是能够根据外来组件的状态来调整this.state.checked。 import React, { Component } from 'react'
import { Text, Vie
浏览 10提问于2019-05-30得票数 0
4回答
React:必须不断更新状态以使textarea可编辑
javascript、reactjs、textarea
在我的组件中，我呈现这个文本区域：
<textarea id="descript" rows="8" value={this.state.description} />
我惊讶地发现我打不出来。经过一些实验后，我发现我正在输入它，但每当我向状态变量输入一个字符时，react就会重新设置它的值。因此，我可以通过添加以下onChange来输入：
<textarea id="descript" rows="8" value={this.state.description}
onChange={() => {
浏览 0提问于2018-09-07得票数 1
回答已采纳
1回答
如果我不能在我的渲染中设置状态，我应该在哪里设置
javascript、reactjs、firebase
我是一个完全的react初学者，最近我发现在我的渲染函数中设置状态是一个很大的禁忌，因为它会导致无休止的递归。但是，我想为我的firebase服务器设置一个侦听器，每当我的firebase文档发生更改时，它就会更新状态。有没有一个异步运行的react函数来渲染我可以做这些状态改变的地方？我尝试过componentDidUpdate()，但它似乎只在初始呈现时运行一次。
浏览 21提问于2021-05-10得票数 0
1回答
在React + Redux中创建输入组件并控制多个表单状态
javascript、reactjs、redux
我的项目有两个独立的形式，‘用户’和‘电影’。我已经创建了一个输入组件，我想在所有3个表单中使用它。这并不是一件复杂的事情，但我想知道正确的方法是将每次击键或模糊操作时的数据保存到正确的redux存储状态。
所以我有两个reducers和两个表单，'user‘和'movies’。用户表单只包含一些用户和用户元数据。movies表单将是用户看过的电影的“集合”。
我已经创建了这个文本字段组件
import React from 'react';
class TextField extends React.Component {
constructor(pr
浏览 0提问于2018-09-24得票数 1
5回答
输入的React.js设定值
javascript、jquery、html、reactjs
我是react.js的初学者，它很神奇，但我面临着一个真正的问题:我需要使用普通的纯javascript设置输入的值，但由于某种原因react.js不能像预期的那样工作。举个例子:打开这个URL
您将看到有一个id为"CntctFrm2emailField“的"Email”输入字段。我试着用javascript用下面的代码改变它的值：
document.getElementById("CntctFrm2emailField").value = "testing@gmail.com";
但是由于某些原因，React.js没有在其核心原因上更新此值
浏览 65提问于2015-06-06得票数 24
2回答
我的onChange事件不处理输入元素
javascript、reactjs
我有一个名为Resume.js的组件，在这个组件中，我定义了一个名为handleChange的函数，它接受一个输入参数，并且基于这个输入值，它改变了我的全局状态。
Resume.js：
import React from 'react'
import PersonalInfo from './PersonalInfo'
import { useState } from 'react'
const Resume = () => {
const [resumeStates, setResumeStates] = useState({
浏览 9提问于2021-12-30得票数 1
2回答
从其他元素React上的mouseOver更新一个元素的样式
javascript、reactjs
我有一个tab元素，其中tab是活动的tab，由props定义，有一个下划线。 它由状态值underlineStyle设置样式。 在初始加载时，当sizes达到getUnderlineStyle时，它的状态还没有更新，这是后来调用的吗？ 我不使用CSS的原因是，有一个转换需要在getSizes()中进行一些计算，所以它从一个可以看到引用的对象sizes中获得了正确的left和right属性值。 在sizes状态更新后，如何调用getUnderlineStyle()来应用正确的样式？ 下面是我的组件的一个片段。 const Tabs = (props) => {
const [si
浏览 34提问于2019-03-12得票数 0
2回答
如何确定用户是否在react中的输入字段中输入了任何值
javascript、reactjs、react-hooks、react-bootstrap
如何确定用户是否在react中的输入字段中输入了任何值。
我试图实现的是，当用户将文本/整数输入到卡内的一个输入字段而不单击“保存”按钮时，我想在卡片周围显示一个边框。
因此，边框应该添加到卡片中，其中至少包含一个未保存的输入字段，并且还更改了输入字段。
我正在使用以下链接中提到的动态形式。
这是如何构造我的动态表单的链接(示例代码)：
Dynamic是一个表单中继器，当我单击“添加一个新行”按钮时。新卡将被添加到react页面。
此新卡将具有相同的字段集，并具有相同的默认值。当用户更改卡中的任何输入字段时。需要在卡片上加一个边框。如果用户单击“保存”按钮，则应该保存输入字段。
当对卡的单个
浏览 5提问于2022-05-04得票数 2
回答已采纳
2回答
获取加载图像的高度并发送给父级
reactjs
我试图在图像加载后获取它的高度，并将其发送回父组件，但这会导致无限的重新渲染。
这是我的代码的原型：
import MyImage from './images/myImage.jpg';
class Image extends React.Component {
constructor(props) {
super(props);
this.state = {
height: 0
}
}
getHeight = (e) => {
const heigh
浏览 2提问于2018-03-24得票数 0
4回答
在输入条目时触发的函数，需要在页面加载时触发
javascript、jquery、reactjs、react-redux
我有一个表单，它有三个输入字段、一个Update按钮和一个Cancel按钮。我目前的工作是禁用更新按钮，如果三个字段中的任何一个为空，然后在填充所有字段后重新启用该按钮。输入字段和表单按钮保存在单独的组件中，因此我一直使用DOM操作将输入字段值放入适当的组件中。 我有一个使用lodash的find方法编写的函数，它应该可以做到这一点，但由于某些原因，它是在对输入字段进行更改时触发的，而不是在页面加载时触发的。此外，它还拉入输入字段的前一个值，而不是页面加载时显示的实际值。 例如，如果页面加载时其中一个输入字段中没有值，则将启用Update按钮。一旦您在空输入字段中键入第一个字符，例如字母A，
浏览 27提问于2019-01-19得票数 0
回答已采纳
1回答
componentWillReceiveProps和回调问题
javascript、html、reactjs
我有一个大问题--可能是缺乏理解--在反应上。我有一个子组件，它可以进行回调，并具有一个componentWillReceiveProps函数。问题是，我不能在孩子持有的文本输入上写字。我会用代码更好地解释自己。
问题
我有一个有文字输入的孩子。那个孩子在他父母的体内。
我需要：
在文本输入上手动键入。
通知父级文本已更改。
在某些情况下修改父程序的输入。
The child
有一个文本支柱来显示文本。textChanged是父类将被支持的回调。
父
包含子元素，有一个用于子级回调的函数，该回调函数不更新子节点的状态，并持有一个按钮来修改子文本。
The issue
如果我
浏览 1提问于2016-11-17得票数 0
回答已采纳
3回答
在React中处理受控的表单组件更改
javascript、forms、reactjs
TLDR:通用设计需求似乎不可能在不违反反应原则或忽略标准封装机会的情况下作出反应。
我有一个表单，它显示来自服务器API的现有数据，并允许用户编辑字段并更新服务器上的数据。这是在用户更改表单输入值时动态发生的，而不是要求用户在每次编辑后“提交”表单。
对于某些表单输入，会立即进行值更改(例如复选框、单选按钮、选择)。对于其他人来说，值的变化是递增的--最明显的是对文本输入。我不希望每次击键时都有一个服务器请求，因为这将导致服务器端验证错误被生成为不完全值。相反，一旦用户离开文本输入字段，服务器就会被更新。如果值不变，发送服务器请求也是一种浪费。
在React中，关键的设计原则似乎是，您维护一
浏览 3提问于2016-08-26得票数 8
回答已采纳
2回答
组件在状态更改后未重新呈现
javascript、reactjs
我正在尝试从youtube获取视频并在浏览器上显示。我可以拿到视频和更新国家财产。(用控制台日志检查) 但是当我更新状态属性时，SearchResults组件不会重新呈现。这是我的组件 class Application extends React.Component {
state = {videos: []};
handleFormSubmit = async term => {
const res = await youtubeApi.get("search", {
params: {q: term}
浏览 10提问于2019-03-11得票数 0
1回答
更改输入标记中的默认值
forms、reactjs、textfield、placeholder、default-value
我正在使用react-form创建一个输入表单。我正在使用标签。我希望预先填充输入字段，但希望用户仍然能够更改输入的默认值。React是我使用的前端语言。我尝试将输入标记内的readOnly字段设置为false。它允许我点击字段，但我仍然不能退格默认日期并将其更改为其他日期。
当我使用占位符，而不是输入标签时，会出现重叠问题(检查所附图像)。一旦输入一个值，就不会有任何问题，因为“到期日”会随着现有功能的增加而提前。
我需要占位符仅在我单击"Due Date“字段输入值时显示，或者在使用输入标记时能够更改默认值。我使用的是react版本16.2.0
&l
浏览 10提问于2018-02-16得票数 1
回答已采纳
2回答
如何在别人的onclick上更改react组件
html、reactjs
我正在构建一个React应用程序，其中我渲染了一个家谱。为此，在每个家谱树组件节点中，我添加了一个onclick，它打开一个模式(也称为弹出表单)，允许用户编辑该人的信息。在模式/弹出窗口中，我在底部有一个提交按钮。我希望当单击submit按钮时，表单中的输入字段(例如: name、parents等)在树中的相应节点上获取和更新。我在我的代码中尝试了这个：
submitbtn.onclick = () => {
alert("couple submit clicked!");
info.husband = document.getElementById(&
浏览 0提问于2020-09-05得票数 0
3回答
如何设置defaultValue，value={this.props.value}，并使用React更新文本输入的值？
javascript、reactjs
摘要：
我试图用React创建一个博客，似乎在设置和更新文本字段时遇到了一个障碍。我有数据库中的博客文本和用户名，并希望在文本窗口中为给定用户设置博客文本。然后，当用户输入时，我也想更新该文本。
尝试：
如果我设置了textarea value={this.props.name}，它将正确设置值，但不会更新。如果我将它设置为使用{this.state.value}更新，那么它将开始为空，但将正确更新。我可以找到如何设置默认值或更新值的示例。我想不出怎么做到这两样。提前谢谢你。
ClickScreen在App中响应组件调用
<ClickScreen
setClicks={this.
浏览 1提问于2016-05-15得票数 6
回答已采纳
1回答
React Material-UI表单处理
reactjs、material-ui
我不确定是我没有正确使用这些特性，还是我不了解material-ui react组件的表单处理和验证？例如，下面的代码似乎在提交表单之前正确地显示了验证错误，但我很难将显示的错误显示为“清除”。
const useStyles = makeStyles((theme: Theme) =>
createStyles({
input: {
"&:invalid": {
border: "red solid 2px"
}
},
浏览 1提问于2020-06-30得票数 0
2回答
在Redux (React)中调用存储分派后，视图不希望重新呈现
javascript、reactjs、ecmascript-6、redux
我需要在redux中的状态改变后更改文本输入值(重新渲染视图)。这意味着从文本输入的所有内容都将存储在redux store中(在每个字符之后)，并重新呈现回输入。如果我使用不带redux的setState，视图会成功更改，但如果我在handleChange函数中使用this.forceUpdate()方法强制重新渲染，也会成功更改视图。
我认为这是事实的问题，在reducer中的状态没有适当地改变。我用谷歌搜索了很多方法，但没有一种方法对我不起作用。
这里减少了代码：
'use strict';
import * as React from "react";
浏览 0提问于2018-04-07得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
