Form ReactJS
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<script src="<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">"></script>
<script src="<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<!-- Latest compiled and minified CSS -->
<!-- Optional theme -->
<div id="example"></div>
JavaScript 1.7
var LoginForm = React.createClass({
getInitialState: function() {
/* начальное состояние */
return {
errorCode: 0,
errorMessage: '',
loginActions: []
}
},
doLogin: function(event) {
event.preventDefault();
var successLogin = (Math.random() >= 0.5) ? true : false;
var actions = this.state.loginActions;
if (!successLogin) {
actions.push('Login failure');
/* изменяем состояние компонента */
this.setState({
errorCode: 1,
errorMessage: 'Error while login',
loginActions: actions
});
} else {
actions.push('Login success');
this.setState({
errorCode: 0,
errorMessage: '',
loginActions: actions
})
}
},
render: function() {
/* учитываем состояние компонента при отрисовке */
var errorMessage = (this.state.errorCode > 0) ? this.state.errorMessage : '';
var errorStyle = (this.state.errorCode > 0) ? {display: 'block'} : {display: 'none'};
return (
<div>
<DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
<MenuItem eventKey="1">Dropdown link</MenuItem>
<MenuItem eventKey="2">Dropdown link</MenuItem>
</DropdownButton>
<div className="action-list">
<ActionList actions={this.state.loginAction} />
</div>
</div>
)
}
});
var ActionList = React.createClass({
render: function() {
/* данные, полученные от родителя доступны через this.props */
return (
<ol>
{
/* this.props.actions.map(function(action) {
return <li>{action}</li>;
}) */
}
</ol>
)
}
});
React.render(<LoginForm...