我在我的反应项目中需要一个对话框,但我找不到实现它的好方法。我已经搜索了其他实现,例如react-modal-dialog,react-modal。有没有更好的方法来与react.js实现对话?
但我不认为他们做的最好的方式,最令人困惑的部分是封装。
以react-modal为例:以上
var App = React.createClass({
getInitialState: function() {
return { modalIsOpen: false };
},
openModal: function() {
this.setState({modalIsOpen: true});
},
closeModal: function() {
this.setState({modalIsOpen: false});
},
render: function() {
return (
<div>
<button onClick={this.openModal}>Open Modal</button>
<Modal
isOpen={this.state.modalIsOpen}
onRequestClose={this.closeModal}
style={customStyles} >
<h2>Hello</h2>
<button onClick={this.closeModal}>close</button>
<div>I am a modal</div>
<form>
<input />
<button>tab navigation</button>
<button>stays</button>
<button>inside</button>
<button>the modal</button>
</form>
</Modal>
</div>
);
}
});
的代码显示使用Modal
的方式,但你可以发现,我们的每一次自己定义onRequestClose
。我知道原因是,Modal
可以通过自己或其父视图关闭。
但我想知道,在父视图中调用Modal.close()
(因为封装)更好吗?如果是这样,你能否给我更多的实施细节?
谢谢您的回答。在阅读要点后,我知道这个问题是关于非宣布和宣布状态之间的折衷。要点的其他部分也是有道理的,也许我已经找到了重建我的对话框的方法:) – Shin