我要听的反应引导模式关闭事件,因为我有一个模式的形式和希望在模式接近清场。我知道怎么做了jQuery的这个样子,
$('#modal-form').on('hidden.bs.modal', fnClearForm);
但在这里我要绑定在组件的功能。
注:我不能使用的反应,引导。这是一个类似question,但它并没有解决我的问题。
这里是我的组件,
class MyModal extends Component {
clearForm = () => {
-- code here --
}
render() {
return (
<div className="modal right fade" id="add-user-modal" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
-- form goes here --
</div>
</div>
</div>
)
}
这里是我打开的模式,
<a className="btn" data-toggle="modal" data-target="#add-user-modal">..</a>
恕我直言,既然你不能使用反应包引导和仅使用CDN。
我认为有听模态的收盘没有准确的方法。另一件事是,有几个收一个自举模式的方法。 (Esc键,点击背景也将关闭模式)。
我能想到的当场的最佳方法是每次打开时间,以清除表单。
我们可能不能够监听模式的结束,但ATLEAST,我们可以知道什么时候就会被打开。
这是我做的示例代码段
小提琴:https://jsfiddle.net/keysl183/69z2wepo/318595/
class MyModal extends React.Component {
constructor(props){
super(props);
this.handleOnChange = this.handleOnChange.bind(this);
this.state= {
testInput:""
}
}
handleOnChange(e){
this.setState({
[e.target.name] : e.target.value
})
}
ClearForm =() =>{
this.setState({testInput:""});
}
render() {
return (
<div className="modal right fade" id="add-user-modal" role="dialog">
<div className="modal-dialog" role="document">
<div className="modal-content">
Hi <br></br>
Test Modal
<input type="text" onChange={this.handleOnChange} name="testInput" value={this.state.testInput} ></input>
<br></br>
</div>
</div>
</div>
)
}
}
class Hello extends React.Component {
constructor(props){
super(props);
this.MyModal = React.createRef();
}
render() {
return <div>
<MyModal ref={this.MyModal}></MyModal>
<a onClick={()=>{this.MyModal.current.ClearForm()}}className="btn" data-toggle="modal" data-target="#add-user-modal">SHOW MODAL</a>
</div>;
}
}
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
这将在每次打开时清除模态分量内部的输入。
另外,我觉得切换一个模式时,它更容易地创建一个参考,而不是道具。您可以避免杂乱的道具,只是申报模式组件内的单一功能,随时随地重用。
我一直在寻找同样的事情,而无需使用react-bootstrap
,但我真的很想模式打开时就知道,然后关闭(按键,点击外或者接近),所以我可以运行我的this.props.onClose
功能。我终于用MutationObserver
并将其连接到引导模式div
做出某种黑客攻击。我还包括一个“抓”,如果不设置onClose
道具。
state = {
isOpen: false
}
modalRef = React.createRef()
// Check if already open and handle onClose if closing
observer = new MutationObserver(mutation => {
const hasShowClass = mutation[0].target.classList.contains('show')
const { isOpen } = this.state
if(hasShowClass && !isOpen) {
this.setState({
isOpen: true
})
} else if(!hasShowClass && isOpen) {
this.props.onClose()
this.setState({
isOpen: false
})
}
})
componentDidMount() {
this.props.onClose &&
this.observer.observe(this.modalRef, {
attributes: true,
attributeFilter: ['class']
})
}
componentWillUnmount() {
this.props.onClose && this.observer.disconnect()
}
<div ref={e => this.modalRef = e} className="modal fade" id={this.props.id} tabIndex="-1" role="dialog" aria-labelledby={`user-form-modal-label`} aria-hidden="true">
</div>