[英]Change react-modal data dynamically
我有一个父组件App.js
和一个子组件MealModal.js
。 当用户单击特定的餐卡时,它会引发一个模式,该模式应该显示有关餐点的更多信息。
因此,我尝试找到一种方法来动态更改模态数据,具体取决于单击的餐卡
我试图将膳食的 id 传递给onClick={this.openModal}
函数并设置 modalId 的状态是该函数。 但我收到以下错误:
警告:无法在现有状态转换期间更新(例如在
render
或其他组件的构造函数中)。 Render 方法应该是 props 和 state 的纯函数; 构造函数的副作用是一种反模式,但可以移动到“componentWillMount”。
到目前为止,这是我的组件:
应用程序.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>
)
}
}
关于我如何做到这一点的任何想法?
好的,所以我找到了解决方案:
首先,我将父onClick={this.openModal}
中的onClick={this.openModal}
更改为onClick= () => {this.openModal}
其次,我将 id 添加为参数: onClick= () => {this.openModal(i)}
最后:更新openModal
函数:
openModal(modalId) {
this.setState({modalIsOpen: true,
modalId});
};
它有效。
openModal(modalId) {
this.setState({
modalId,
modalIsOpen: true
});
};
并将调用函数修改为
<div className="col-sm-6 col-xs-12" key={i} onClick={() => this.openModal(x) } >
<MealCard/>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.