动态更改反应模式数据
[英] Change react-modal data dynamically
本文介绍了动态更改反应模式数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个父组件 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:
Warning: Cannot update during an existing state transition (such as
within render or another component's constructor). Render methods
should be a pure function of props and state; constructor side-effects
are an anti-pattern, but can be moved to 'componentWillMount'.
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.
这篇关于动态更改反应模式数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
