![](/img/trans.png)
[英]React prevent change state in child component when parent component update
[英]react stateless child components do not update on state change in parent component
我正在構建一個小的選項卡式應用程序,其中每個選項卡都呈現一個子組件。
我希望每個選項卡顯示不同的內容,因此我在render(){ .... }
外部創建了一個對象contentTypes
以將每個選項卡映射到其對應的子組件。 子組件通過prop接收處理程序和狀態。
class App extends Component {
state ={
contentType: "A",
title: "Overview",
searchContent: ""
}
tabHandler= (content,event)=>{
console.log("clicked");
this.setState({
title: event.target.name,
contentType: content
});
}
searchHandler = (event) => {
// this performs a search on a database and
//returns suggestions for the current input
this.setState({
searchContent: event.target.value
});
}
contentTypes = {
A: <A/>,
B: <B/>,
C: <C onchange={this.searchHandler.bind(this)} content={this.state.searchContent}/>
};
render() {
return (
<div className="row">
<ul>
<Tab click={this.tabHandler.bind(this)} id="A" name="A"/>
<Tab click={this.tabHandler.bind(this)} id="B" name="B"/>
<Tab click={this.tabHandler.bind(this)} id="C" name="C"/>
</ul>
<h1 id="title">{this.state.title}</h1>
{this.contentTypes[this.state.contentType]}
</div>
);
}
}
子組件是無狀態的,定義如下:
import React from 'react'
import Field from './form-builder/field';
const C = (props) => {
return(
// Field is another stateless component with formatted <input> tags
<Field type="text" name="search" content={props.content} onchange={props.onchange}/>
);
}
export default C;
字段定義如下:
import React from 'react';
const field = (props) => {
<li className="field">
<input type="text" onChange={props.onchange} value={props.content} />
<label htmlFor={props.name}>{props.value}</label>
</li>
}
export default field;
問題是,當我從Field
內部調用處理程序以更新父組件中的狀態時,(帶有render(){ .... }
那個子組件)子組件不會以新狀態更新。
有想法該怎么解決這個嗎?
您將contentTypes
定義為類屬性。
它實際上與:
class App extends Component {
constructor() {
this.contentTypes = {
A: <A />,
B: <B />,
C: <C
onchange={this.searchHandler.bind(this)}
content={this.state.searchContent}/>
}
}
}
因此,在構造函數中呈現的元素永遠不會獲得任何道具更新。
這是解決此問題的方法:
class App extends Component {
contentTypes = {
A: () => (<A/>),
B: () => (<B/>),
C: () => (
<C
onchange={this.searchHandler.bind(this)}
content={this.state.searchContent} />
)
}
// ...
render () {
const Content = this.contentTypes[this.state.contentType]
return (
<div>
{/* ... */}
<Content />
</div>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.