[英]Updating child property from parent in React Native
I want to be able to update a child component property from both the parent and itself according to the last event. 我希望能够根据上一个事件从父级和自身更新子级组件属性。
For example: 例如:
class MyParent extends Component {
state ={
text:"";
}
render() {
return (
<View>
<MyChild text={this.state.text} />
<Button
onPress={()=>this.setState({text:"parent"})}
title="Update From Parent"
/>
</View>
);
}
}
class MyChild extends Component {
state ={
text:"";
}
componentWillReceiveProps(nextProps) {
if (nextProps.text!== this.state.text) {
this.setState({text:nextProps.text});
}
}
render() {
return (
<View>
{/* I want that the text field will be updated from the last event*/}
<Text>{this.state.text}</Text>
<Button
onPress={()=>this.setState({text:"child"})}
title="Update From Child"
/>
</View>
);
}
}
The issue is that componentWillReceiveProps is triggered each time the setState is called so the text property takes the value from the parent and not from the child. 问题在于,每次调用setState时都会触发componentWillReceiveProps,因此text属性从父级而不是子级获取值。
How can I achive this result? 我如何获得这个结果?
Thanks a lot Elad 非常感谢Elad
Manage your state
through parent
component and pass
the function that will update the state
of parent
component in child
component 通过
parent
组件管理state
,并pass
将更新child
组件中parent
组件state
的功能
class MyParent extends Component {
constructor(props) {
super(props);
this.state = {
text: "",
updateParentState: (newState) => this.setState(newState)
}
}
render() {
let { text, updateParentState } = this.state;
return (
<View>
<MyChild data={{ text, updateParentState }} />
<Button
onPress={() => updateParentState({ text: "parent" })}
title="Update From Parent"
/>
</View>
);
}
}
class MyChild extends Component {
constructor(props) {
super(props);
this.state = {
text: props.data.text
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.text !== this.state.text) {
this.setState({ text: nextProps.data.text });
}
}
render() {
let { updateParentState } = this.props.data;
return (
<View>
<Text>{this.state.text}</Text>
<Button
onPress={() => updateParentState({ text: "child" })}
title="Update From Child"
/>
</View>
);
}
}
You are missing this. 你错过了这个。 in the setState call in child.
在setState子项中。 please check if this is not the issue.
请检查这是否不是问题。
<Button
onPress={()=>setState({text:"child"})}
title="Update From Child"
/>
should be 应该
<Button
onPress={()=>this.setState({text:"child"})}
title="Update From Child"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.