[英]Modal inside map React
我有類似的問題如何在 React Js 中的 map 函數中使用 Bootstrap Modal 來渲染單個元素? 但是答案在我的代碼中不起作用,或者我沒有正確實現它。 我知道在 map to 方法中只指向列表的最后一個元素,但是我可以做些什么來從 map 中傳輸 toogleConfirmation 的正確數據? 任何提示?
它是我的 ModalComponent.jsx
export const ModalHeader = props => {
return <div className="modal-header">{props.children}</div>;
};
export const ModalBody = props => {
return <div className="modal-body">{props.children}</div>;
};
export const ModalFooter = props => {
return <div className="modal-footer">{props.children}</div>;
};
class ModalComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
modalShow: '',
display: 'none'
};
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
}
openModal() {
this.setState({
modalShow: 'show',
display: 'block'
});
}
closeModal() {
this.setState({
modalShow: '',
display: 'none'
});
}
componentDidMount() {
this.props.isOpen ? this.openModal() : this.closeModal();
}
componentDidUpdate(prevProps) {
if (prevProps.isOpen !== this.props.isOpen) {
this.props.isOpen ? this.openModal() : this.closeModal();
}
}
render() {
return (
<div
className={'modal fade ' + this.state.modalShow}
tabIndex="-1"
role="dialog"
aria-hidden="true"
style={{ display: this.state.display }}
>
<div className="modal-dialog" role="document">
<div className="modal-content">{this.props.children}</div>
</div>
</div>
);
}
}
export default ModalComponent;
和渲染方法中的表格
class Datas extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
isConfirmed: false,
collections: [],
data: '',
datas: []
};
this.toggle = this.toggle.bind(this);
this.changeConfirmation = this.changeConfirmation.bind(this);
}
toggle() {
this.setState({ modal: !this.state.modal });
}
changeConfirmation(){
this.setState({
isConfirmed: !this.state.isConfirmed
});
}
toggleConfirmation(name, status) {
this.changeConfirmation();
this.toggle();
//next code with name and status
}
render() {
return (
<Table responsive>
<thead className="text-primary">
<tr>
<th>Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.collections.map((collection, i) => (
<tr key={i}>
<td>{collection.name}</td>
<td>{collection.status}</td>
<td>
<button
type="button"
className="btn btn-danger"
onClick={() => this.setState({
modal: true,
data: collection
})}
>
</button>
<Modal isOpen={this.state.modal}>
<ModalHeader>
<h5>Confirmation</h5>
<button
type="button"
className="close"
aria-label="Close"
onClick={this.toggle.bind(this)}
>
<span aria-hidden="true">×</span>
</button>
</ModalHeader>
<ModalBody>
<p>Are you sure to proceed with this action with {collection.name} ?</p>
</ModalBody>
<ModalFooter>
<button
type="button"
className="btn btn-secondary"
onClick={this.toggle.bind(this)}
>
Close
</button>
<button
type="button"
className="btn btn-primary"
onClick={this.toggleConfirmation.bind(this, collection.name, collection.status)}
>
Ok
</button>
</ModalFooter>
</Modal>
</td>
</tr>
))}
</tbody>
</Table>
)
}}
只需將集合作為道具傳遞給 Data.js 中的 ModalBody、ModalHeader 和 ModalFooter
<ModalBody collection={collection}/>
你可以像這樣更新 ModalBody , ModalHeader & ModalFooter :
export const ModalBody = props => {
return (<div className="modal-body">
<p>Are you sure to proceed with this action with {props.collection.name} </p>
</div>);
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.