gpt4 book ai didi

javascript - 如何使用新的 props 更新模态组件

转载 作者:行者123 更新时间:2023-12-01 02:58:38 24 4
gpt4 key购买 nike

我有一个模式组件,用于将食谱保存到列表中。

 modal = <Modal saveRecipe={this.saveRecipe} closeModal={this.toggleModal}/>

我也想使用相同的模态组件来编辑配方,所以我这样做

if(this.state.editItem){
modal = <Modal content={editContent} saveRecipe={this.saveRecipe} closeModal={this.toggleModal}/>
}
else{
modal = <Modal saveRecipe={this.saveRecipe} closeModal={this.toggleModal}/>
}

这样我就可以将要编辑的对象传递给模态组件。模态组件有一个文本输入和一个文本区域元素。

constructor(props) {
super(props);
this.state = {dish: '', ingredients:[]};
}
componentWillReceiveProps(nextProps){
console.log(nextProps) // Never fired..why??
let {dish, ingredients} = nextProps.content
this.setState({
dish:dish, ingredients:ingredients
})
}
render(){
let {dish, ingredients} = this.state
console.log(this.props) // {dish:"new dish", ingredients:['ingreds']}
return(
<div className="modal">
<input type="text" ref="title" value={dish} />
<textarea ref="ingredients" value={ingredients}></textarea>
</div>
)

我想在单击编辑时预填充模式表单元素。如果我提供

,我就可以填充输入和文本区域字段
let {dish, ingredients} = this.props

而不是this.state。但随后表单字段变得不可编辑。所以引用forms ,我正在尝试更改模态组件的状态。在我的代码中 componentWillReceiveProps 从未被触发?在这种情况下,componentWillRecieveProps 究竟如何工作?如何使用新的 props 更新模态组件?

最佳答案

在您的情况下,您必须使用 componentDidMount 因为当设置 editItem 状态时,您将卸载 Model 组件并使用 内容属性。因此,在这种情况下,componentWillRecceiveProps 将不会被触发,但 componentDidMount 将被触发。因此,将您的 componentWillReceiveProps 逻辑移动到 componentDidMount 就像

componentDidMount(){ 
console.log(this.props) // Never fired..why??
let {dish, ingredients} = this.props.content
this.setState({
dish:dish, ingredients:ingredients
})
}

关于javascript - 如何使用新的 props 更新模态组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46578860/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com