![](/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.