
本文介绍了动态更改反应模式数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个父组件 App.js
和一个子组件 MealModal.js
.当用户单击特定的餐卡时,它会引发一个模式,该模式应该显示有关餐点的更多信息.
因此我试图找到一种方法来动态更改模态数据,具体取决于点击的餐卡
我尝试将餐点的 id 传递给 onClick={this.openModal}
函数并设置 modalId 的状态是该函数.但我收到以下错误:
警告:无法在现有状态转换期间更新(例如在 render
或其他组件的构造函数中).渲染方法应该是 props 和 state 的纯函数;构造函数副作用是一种反模式,但可以移至componentWillMount".
这是我目前的组件:
App.js:
从'react'导入React;从 './MealCard' 导入 MealCard;从 './MealsMap' 导入 MealsMap;从 './MealsFilters' 导入 MealsFilters;从 './MealModal' 导入 MealModal;导出默认类 App 扩展 React.Component {构造函数(){极好的();this.state = {modalIsOpen: 假,modalId: 0}this.openModal = this.openModal.bind(this);this.closeModal = this.closeModal.bind(this);};openModal() {this.setState({modalIsOpen: true});};关闭模态(){this.setState({modalIsOpen: false});};使成为() {返回 (<div><MealsFilters/><div className="app-wrapper" style={{display: 'flex'}}><div className="容器"><div className="row">{[...Array(20)].map((x, i) =><div className="col-sm-6 col-xs-12 " key={i} onClick={this.openModal}><餐卡/>
)}
<MealsMap/>
<MealModal modalIsOpen={this.state.modalIsOpen} closeModal={this.closeModal} modalId={this.state.modalId}/>
);}}
MealModal.js
从'react'导入React;从'react-modal'导入模态;const customStyles = {内容 : {}};Modal.setAppElement('#app')导出默认类 MealModal 扩展 React.Component {构造函数(道具){超级(道具);}使成为() {返回 (<模态isOpen={this.props.modalIsOpen}onRequestClose={this.props.closeModal}样式={自定义样式}contentLabel="膳食模式"><div className="modal-wrapper"><div className="container text-center"><h1>你好</h1><h2>这个模态的ID是{this.props.modalId}</h2><h3>这是一个很棒的模态.</h3><button onClick={this.props.closeModal}>close</button>
</模态>)}}
知道如何做到这一点吗?
解决方案
好的,我找到了解决方案:
首先,我将父组件中的 onClick={this.openModal}
更改为 onClick= () =>{this.openModal}
其次,我将 id 添加为参数:onClick= () =>{this.openModal(i)}
最后:更新openModal
函数:
openModal(modalId) {this.setState({modalIsOpen: true,modalId});};
它有效.
I have a Parent component, App.js
and a Child component, MealModal.js
. When a user click on a specific meal card, it raises a modal that should display further information about the meal.
Hence I try to find a way to dynamically change the modals's data, depending on which meal card is clicked
I have tried to pass the id of the meal to the onClick={this.openModal}
function and set the state of modalId is the function. But I got the following error:
Here are my components so far:
App.js:
import React from 'react';
import MealCard from './MealCard';
import MealsMap from './MealsMap';
import MealsFilters from './MealsFilters';
import MealModal from './MealModal';
export default class App extends React.Component {
constructor() {
super();
this.state = {
modalIsOpen: false,
modalId: 0
}
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
};
openModal() {
this.setState({modalIsOpen: true});
};
closeModal() {
this.setState({modalIsOpen: false});
};
render() {
return (
<div>
<MealsFilters/>
<div className="app-wrapper" style={{display: 'flex'}}>
<div className="container">
<div className="row">
{[...Array(20)].map((x, i) =>
<div className="col-sm-6 col-xs-12 " key={i} onClick={this.openModal}>
<MealCard />
</div>
)}
</div>
</div>
<MealsMap/>
</div>
<MealModal modalIsOpen={this.state.modalIsOpen} closeModal={this.closeModal} modalId={this.state.modalId}/>
</div>
);
}
}
MealModal.js
import React from 'react';
import Modal from 'react-modal';
const customStyles = {
content : {
}
};
Modal.setAppElement('#app')
export default class MealModal extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
isOpen={this.props.modalIsOpen}
onRequestClose={this.props.closeModal}
style={customStyles}
contentLabel="Meal Modal"
>
<div className="modal-wrapper">
<div className="container text-center">
<h1>Hello</h1>
<h2>ID of this modal is {this.props.modalId}</h2>
<h3>This is an awesome modal.</h3>
<button onClick={this.props.closeModal}>close</button>
</div>
</div>
</Modal>
)
}
}
Any idea on how I could do this ?
解决方案
Ok so I found the solution:
First, I changed onClick={this.openModal}
in the parent comoponent to onClick= () => {this.openModal}
Second, I add the id as a parameter:onClick= () => {this.openModal(i)}
Finally: update the openModal
function:
openModal(modalId) {
this.setState({modalIsOpen: true,
modalId});
};
And it works.
这篇关于动态更改反应模式数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
07-22 13:06