[英]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.