back-end developers, who are not very familiar with the front end, now expect to be able to extract a Modal box for reuse.
because a Modal is very generic and will appear on many pages, now you want to extract it into a separate js, and introduce it where you use it. I wonder if it"s feasible?
what exactly should I do? Can I get state in this modal?
Update: after reading @ Erli"s answer, I figured out that I can basically click button to control modal by writing such a demo, but now I encounter a problem. After opening Modal, I click anywhere on the page, it will cause the Modal to be hidden. I don"t know what the reason is? [hit log, and find that clicking anywhere on the page triggers the cancel method. I don"t know why. ]
parent component
import React, { Component } from "react";
import "./App.css";
import Button from "antd/lib/button";
import MyModal from "./component/MyModal"
class App extends Component {
constructor() {
super();
this.state = {
visible: false,
title: "",
key: Math.random()
}
}
onCancel = () => {
console.log("cancel");
this.setState({
visible: false,
key: Math.random()
});
}
showModel = () => {
let visible = this.state.visible;
this.setState({
visible: !visible
})
}
render() {
return (
<div className="App">
<Button type="primary"
onClick={this.showModel}>
Button
</Button>
<MyModal
key={this.state.key}
visible={this.state.visible}
title={this.state.title}
onCancel={this.onCancel}>
</MyModal>
</div>
);
}
}
export default App;
subcomponents
import React, { Component } from "react";
import { Modal } from "antd";
export default class MyModal extends Component {
constructor(props) {
super(props);
this.state = {
};
}
handleOk = (e) => {
console.log(e);
}
handleCancel = (e) => {
console.log("cancel");
this.props.onCancel();
}
render() {
return (
<Modal
key={Math.random()}
title={this.props.title}
visible={this.props.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Some contents...
Some contents...
Some contents...
</Modal>
)
}
}