![](/img/trans.png)
[英]Functional Component child component does not re-rendered after its props is updated by its Parent
[英]React children component is not re-rendered after props from parent changed
我正在学习React并遇到了这种情况。 基本上我有一个带有输入框的React组件测试,在里面我有另一个组件Hello打印出Hello +所有文本用户类型。 所以我期望的是,如果我输入某个,那么this.text将被更新,然后Hello组件将重新渲染。 然而,这并没有发生。 我意识到我需要在this.state中设置“text”然后Hello将重新渲染。 我的问题是为什么Hello组件不会重新渲染,虽然它的道具已被更改? 提前致谢。
import ReactDOM from "react-dom";
import React, { Component } from "react";
import Hello from "./hello";
class Test extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.text = e.target.value;
console.log(this.text);
}
render() {
return (
<div>
<h1>Test</h1>
<form>
<input value={this.text} onChange={e => this.handleChange(e)} />
<button>Add</button>
</form>
<Hello name={this.text} />
</div>
);
}
}
和Hello.js组件是
export default ({ name }) => <h1>Hello {name}!</h1>;
您的代码有2个问题。 首先,您需要在构造函数中拥有state
。 其次,您需要使用React提供的setState
设置状态。
import ReactDOM from "react-dom";
import React, { Component } from "react";
import Hello from "./hello";
class Test extends Component {
constructor(props) {
super(props);
// This is how you set state
this.state = {
text:''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
// This is how you update state
this.setState({text: e.target.value})
console.log(this.text);
}
render() {
return (
<div>
<h1>Test</h1>
<form>
<input value={this.state.text} onChange={e => this.handleChange(e)} />
<button>Add</button>
</form>
<Hello name={this.state.text} />
</div>
);
}
}
这是一个文档,您可以在其中阅读更多相关信息。
在这里,您要修改实例字段( this.text
),而不是使用setState()
设置状态。
例如你的代码,简化:
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.state = { text: "" };
}
handleChange(e) {
this.setState({text:e.target.value});
}
render() {
return (
<div>
<h1>Test</h1>
<form>
<input value={this.state.text} onChange={e => this.handleChange(e)} />
<button>Add</button>
</form>
{this.state.text}
</div>
);
}
}
export default App;
您需要使用setState
而不是将值设置为本地var。 渲染自动跟随setState。
class App extends React.Component { constructor(props) { super(props); // Add state to the constructor this.state = { text: '' }; this.handleChange = this.handleChange.bind(this); } handleChange(e) { // Set the value to the state text property this.setState({ text: e.target.value }); } // Use `this.state.text` instead of this.text render() { return ( <div> <h1>Test</h1> <form> <input value={this.state.text} onChange={this.handleChange} /> <button>Add</button> </form> <Hello name={this.state.text} /> </div> ); } } function Hello({ name }) { return <h1>Hello {name}!</h1>; } ReactDOM.render( <App />, document.getElementById('root') );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>
这可以通过在组件上设置状态来处理。 您需要在测试组件中修复此问题。
设置文本值this.setState({ text: '' })
获取文本值this.state.text
使用this.handleChange = this.handleChange.bind(this)
的原因是访问this.setState
中的this.setState。
在React中阅读有关州的更多信息。
import React, { Component } from "react";
import Hello from "./Hello";
class Test extends Component {
constructor(props) {
super(props);
this.state = {
text: ''
}
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
this.setState({
text: e.target.value
});
}
render() {
return (
<div>
<h1>Test</h1>
<form>
<input value={this.state.text} onChange={e => this.handleChange(e)} />
<button>Add</button>
</form>
<Hello name={this.state.text} />
</div>
);
}
}
export default Test;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.