reactjs - 使用 ReactStrap 的模态组件
问题描述
目前我有一个单一的组件(Logbook.js),它有一个日志表,每个都有一个唯一的键。当我单击表格行时,模式会在模式中显示该行的数据。在此模式中,当我单击更新时,会出现另一个模式,并且数据会整齐地显示在准备更新的表单中。我想将这些模态分成单独的组件,DisplayModal.js 和 UpdateModal.js。我怎样才能做到这一点,以便将行中包含的数据传送到组件?
解决方案
这可以让您知道从哪里开始:
const { Button, Modal, ModalHeader, ModalBody, ModalFooter } = Reactstrap;
class Modal1 extends React.Component {
render() {
return (
<React.Fragment>
<ModalHeader toggle={this.toggle}>{this.props.title}</ModalHeader>
{this.props.children}
</React.Fragment>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
modal: false,
modalType: 1
};
this.toggle = this.toggle.bind(this);
this.changeModalType = this.changeModalType.bind(this);
}
changeModalType(type) {
this.setState({modalType: type});
}
toggle() {
this.setState(prevState => ({
modal: !prevState.modal
}));
}
renderDisplayModal() {
return(
<React.Fragment>
<ModalBody>
This is display modal
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => this.changeModalType(2)}>Open Update Modal</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</React.Fragment>
);
}
renderUpdateModal() {
return(
<React.Fragment>
<ModalBody>
This is update modal
</ModalBody>
<ModalFooter>
<Button color="primary" onClick={() => this.changeModalType(1)}>Open Display Modal</Button>{' '}
<Button color="secondary" onClick={this.toggle}>Cancel</Button>
</ModalFooter>
</React.Fragment>
);
}
render() {
return (
<div>
<Button color="danger" onClick={this.toggle}>Open</Button>
<Modal isOpen={this.state.modal} toggle={this.toggle}>
<Modal1 click={this.toggle} title={this.state.modalType === 1 ? 'Display title' : 'Update Modal'}>
{this.state.modalType === 1
? this.renderDisplayModal()
: this.renderUpdateModal()
}
</Modal1>
</Modal>
</div>
);
}
}
ReactDOM.render( < App / > ,
document.getElementById('root')
);
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/6.0.1/reactstrap.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css" crossorigin="anonymous">
<div id="root" />
推荐阅读
- docker - 在 Docker 容器中启用 systemctl
- javascript - Firebase 部署:缺少预期的 Firebase 配置值 databaseURL
- tensorflow - Tensorflow - 机器翻译解码器
- javascript - JavaSript 类型错误:x() 不是函数
- python - 如何在 tkinter 中关闭笔记本选项卡?
- android - 有没有办法自定义一个apk的安装过程?
- node.js - 无论如何可以使用 date-fns 更改我的日期格式吗?
- ios - 在 App Store 上传应用时出错
- c# - 如何在 C# Entity Framework 中获取 SQL 查询的结果?
- groovy - jenkinsfile - 检查方法是否已定义