在React -选择输入更改状态后，react不重新呈现ComponentDidUpdate
在React中，当选择输入更改状态后，React不会重新呈现ComponentDidUpdate。这是因为ComponentDidUpdate生命周期方法只在组件重新呈现后调用，而不是在状态更改时调用。
在React中，当组件的状态发生变化时，React会自动重新呈现组件，并调用相应的生命周期方法。但是，如果只是改变了组件的输入属性而没有改变状态，React不会重新呈现组件。
要在选择输入更改状态后重新呈现组件并调用ComponentDidUpdate，可以使用以下方法之一：
- 使用
setState方法更新组件的状态：在选择输入更改时，调用setState方法更新组件的状态。这将触发React重新呈现组件并调用ComponentDidUpdate。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
handleChange = (event) => {
this.setState({ inputValue: event.target.value });
}
componentDidUpdate(prevProps, prevState) {
// 在组件重新呈现后调用
console.log('Component updated');
}
render() {
return (
<div>
<input value={this.state.inputValue} onChange={this.handleChange} />
</div>
);
}
}- 使用
key属性重新创建组件：将选择输入的值作为组件的key属性，并在每次更改时更新key的值。这将导致React将组件视为新的实例，并重新呈现组件并调用ComponentDidUpdate。例如：
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
};
}
handleChange = (event) => {
this.setState({ inputValue: event.target.value });
}
componentDidUpdate(prevProps, prevState) {
// 在组件重新呈现后调用
console.log('Component updated');
}
render() {
return (
<div key={this.state.inputValue}>
<input value={this.state.inputValue} onChange={this.handleChange} />
</div>
);
}
}无论使用哪种方法，当选择输入更改状态后，React将重新呈现组件并调用ComponentDidUpdate生命周期方法。
相关·内容
我真的搞不懂这一点：import Select from "react-select";
{this.state.selectedOption.Model} );
componentDidUpd
浏览 8提问于2018-07-24得票数 0
回答已采纳
2回答
我有反应组件，但我不能得到更新的高度，只有高度后，元素呈现。render() { <span> </span> }这里我应该使用componentDidUpdate()，并且不需要在componentDidUpdate()方法中使用while，因为每次更新状态时都会触发它。
浏览 3提问于2017-09-10得票数 1
回答已采纳
我有一个很大的问题，也许我遗漏了react componentDidMount的工作原理，或者它是一种奇怪的行为(我知道我不能提供一个真正的jQuery插件，但我非常确定问题不仅仅是插件本身)。var Hello = React.createClass({ return {content: '<div id="target">ciao!target; return <div>Hello {t
浏览 1提问于2016-11-30得票数 0
我的react App上有一个嵌套组件。class Home extends React.Component { super(); }class ShowChart extends React.Component { super();
this.state = {color: "red我尝试了getDerivedStateFromProps()和c
浏览 171提问于2021-05-02得票数 0
回答已采纳
重新呈现react组件时，该组件的状态会发生什么变化？
它是保持不受影响，还是被重置为某个“默认值”？为什么？
浏览 1提问于2020-06-27得票数 0
日志显示我的父组件正在重新注册自己。我认为儿童改过自新的逻辑如下，我认为我错了。当父重选器时，反应如何决定哪些子组件被重新命名？父母渲染
render()
浏览 2提问于2016-10-24得票数 5
我试图使筛选项具有功能，并遇到以下代码：当我使用filterItems时，第二个参数setState的目的是什么
浏览 1提问于2019-12-24得票数 1
回答已采纳
当我使用react-router更改路由时，是否应该触发componentDidUpdate？我修改了示例代码，但似乎无法使其正常工作。import React from 'react';import App from './App';
import './index.c
浏览 1提问于2017-03-23得票数 27
回答已采纳
当componentDidUpdate()更改时，我依赖componentDidUpdate()触发下载。这样做合理吗？我注意到的一件事是，组件在接收到新的pageNumber时会重新呈现，即使一开始没有什么变化，但是一旦下载了数据，组件就会重新呈现。第一次重渲染是多余的。我不应该为此烦恼吗？如果我真的很烦心，我可以使用shouldComponentUpdate()只在data更改时重新呈现
浏览 1提问于2018-11-05得票数 1
回答已采纳
我不明白componentDidMount和componentDidUpdate有什么不同我们应该在什么时候使用componentDidMount或componentDidUpdate
浏览 2提问于2019-02-23得票数 14
回答已采纳
该组件使用其初始属性进行呈现，然后我在componentDidUpdate()中调用Prism.highlightElement();，它也可以很好地突出显示语法。但是，我们已经在React父组件中输入了更改需要生成的代码的内容。当进行更改时，生成的突出显示的代码保持不变。子组件的其他部分没有被语法高亮显示，尽管Prism.js可以很好地更新。因此，React没有重新呈现修改过的DOM似乎是一个问题
浏览 9提问于2018-02-07得票数 1
1回答
使用React，很容易设置新值，这是呈现某些输入的条件，然后使用状态回调将焦点放在该输入上。 const showInput = !this.refs.input.focus() if(this.showInput) { }这将失败，因为React还没有用输入</em
浏览 3提问于2017-02-25得票数 4
回答已采纳
用户可以按“+”和“-”按钮来更改号码。它还呈现一个输入元素，以便我们可以在<form>中使用它。<Counter>.中呈现<Counter>组件，而希望在我们更改值之后立即提交这个表单。因此，我们将this.handleSubmit()放在setState的第二个参数回调中，以确保在状态更新后执行它。但是在函数示例中，据我所知，在状态<
浏览 6提问于2020-01-10得票数 4
回答已采纳
2回答
我知道，如果键值发生变化，使用" key "支柱在任何React组件上都会重新安装。
使用"ComponentShouldUpdate"生命周期方法只会更新组件而不是重新呈现。在什么情况下，我们应该使用“键”和"ComponentShouldUpdate"？使用一种比另一种更有优势吗？
浏览 5提问于2020-07-11得票数 0
回答已采纳
我使用函数组件来呈现组件。但是只要设置了状态，输入控件就会失去焦点。
如何更改下面的代码，使输入不会失去焦点？我需要这个组件是一个函数组件。我的表单上有10个输入，所以根据哪个文本框发生了更改，它应该在呈现后将焦点放在更改后的文本框上。在changeHandler(事件)中，我知道包含目标属性的事件，该属性引用更改后的文本框，因此在</e
浏览 2提问于2017-05-05得票数 0
import React, { useEffect, useState } from "react"; returnclass extends React.Component { console.log("inside componentDidUpdateuseState("")
浏览 0提问于2021-01-30得票数 3
回答已采纳
输入一个符号，如AAPL，TSLA，GOOG，并显示所有3个的当前价格。
问题是，在输入第一个库存后，我无法让组件自动更新。它只按一定时间间隔(通过setInterval更新15秒)进行更新。如何让我的组件在表单提交时更新？在StockList中，我有一些道具，其中包含从我的主App组件传递过来的符号名称。这在第一次通过时运行得很好，但是每当我输入更多的股票时，除非setInterval运行，否则组件不会更新。我在StockInfo中运行this.se
浏览 0提问于2018-10-06得票数 0
当以下内容为真时，我需要确保输入元素是有重点的：
componentDidUpdate() { }
浏览 0提问于2017-10-11得票数 49
我试图理解在react中基于类的组件。我偶然发现了这些生命周期方法。我只是想了解一下componentDidUpdate()componentDidUpdate()不同于useEffect()，因为如果<em
浏览 22提问于2021-09-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
