我从反应引导网站得到了这个简单的代码......
import {Modal} from 'react-bootstrap';
import React from 'react';
export default class ModalExperiment extends React.Component {
constructor(props) {
super(props);
this.state = {
open: false
}
}
render(){
let openModal = () => this.setState({open: true});
let closeModal = () => this.setState({ open: false });
return (
<div>
<button type='button' onClick={openModal} className='launch'>Launch modal</button>
<Modal
show={this.state.open}
onHide={closeModal}
aria-labelledby="ModalHeader" className='modalClass'
>
<Modal.Header closeButton>
<Modal.Title id='ModalHeader'>A Title Goes here</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>Some Content here</p>
</Modal.Body>
<Modal.Footer>
// If you don't have anything fancy to do you can use
// the convenient `Dismiss` component, it will
// trigger `onHide` when clicked
<Modal.Dismiss className='dismiss btn btn-default'>Cancel</Modal.Dismiss>
// Or you can create your own dismiss buttons
<button className='btn btn-primary' onClick={closeModal}>
Close
</button>
</Modal.Footer>
</Modal>
</div>
)
}
}
这是我的测试...简单我想单击启动按钮,验证模态打开,然后单击取消按钮以验证模态不再打开。
'use strict';
import React from 'react';
import ReactAddons from 'react/addons';
import {Modal} from 'react-bootstrap';
import ModalExperiment from '../ModalExperiment';
import ReactDOM from 'react-dom';
let TestUtils = React.addons.TestUtils;
fdescribe('ModalExperimentFunctional', function() {
let page;
fit("click the ok button should open the modal", () => {
page = TestUtils.renderIntoDocument(<ModalExperiment/>);
let launch = TestUtils.findRenderedDOMComponentWithClass(page, 'launch');
let openButton = React.findDOMNode(launch);
openButton.click(); // work till here
//let modal = TestUtils.findRenderedComponentWithType(page, Modal);// this managed to find Modal type
let modal = TestUtils.findRenderedDOMComponentWithClass(page, 'modalClass'); // this fails to find the modalClass..
});
});
请问如何找到取消按钮?我尝试了各种各样的东西,似乎没有什么对我有用。