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