React wizard
// use jsx to render html, do not modify simple.html
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Wizard from 'rc-wizard';
require('rc-wizard/assets/index.css');
class Test extends Component {
constructor(props) {
super(props);
this.state = {
displayKey: '2',
};
}
gotoFirstPage() {
this.setState({
displayKey: '1',
});
}
render() {
return (
<div>
<button onClick={() => { this.gotoFirstPage(); }}>
Go to first page
</button>
<Wizard
id="selected-step-test"
onDone={() => { alert('Wizard is done'); }}
displayKey={this.state.displayKey}
>
<Wizard.Step key="1">
I'm the first page.
</Wizard.Step>
<Wizard.Step key="2">
I'm the default displaying second page.
</Wizard.Step>
<Wizard.Step key="3">
I'm the third page.
</Wizard.Step>
</Wizard>
</div>
);
}
}
ReactDOM.render(<Test />, document.getElementById('__react-content'));