Ivanopalas · January 20, 2016 10:15
diff --git a/scifi.html b/scifi.html
 <!DOCTYPE html>
 <html lang="ru">
 <head>
    <meta charset="UTF-8">
    <title>Sci-Fi</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 </head>
 <body>
 <div class="container">
    <h1>Задание №4</h1>
    <div class="row">
        <div class="col-md-6">
            <p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p>
            <ul>
                <li>планет всего три: «Земля», «Марс» и «Венера»;</li>
                <li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li>
                <li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li>
            </ul>
            <p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p>
        </div>
        <div class="col-md-6">
            <form>
                <div class="form-group">
                    <label for="name">Имя</label>
                    <input class="form-control" name="name" id="name">
                </div>
                <div id="container"></div>
                <input type="submit" class="btn btn-primary" value="Создать персонажа">
            </form>
        </div>
    </div>
 </div>
 <script type="text/babel">
    var Selector = React.createClass({

        // Иннициализируем state с переменной active
        getInitialState: function() {
            return { active:'btn' }
        },

        // Создаем функцию которая будет обрабатывать нажатия на кнопки и делать их активными и не активными.
        // Задаем функции buttonActive параметр 
        buttonActive: function(e) {
            this.state.active.className = 'btn';
            e.target.className = 'btn active';
            this.state.active = (e.target);
        },
      render() {
        return (
            <div className = 'form-group btn-group btn-group-justified'>
                { this.choiseHuman }
                <div className = 'btn-group'>
                    <button className = 'btn btn-default' onClick={this.buttonActive}>Люди</button>
                </div>
                <div className = 'btn-group'>
                    <button className = 'btn btn-default' onClick={this.buttonActive}>Марсиане</button>
                </div>
                <div className = 'btn-group'>
                    <button className = 'btn btn-default' onClick={this.buttonActive}>Венериане</button>
                </div>
            </div>
        );
      }
    });
    ReactDOM.render(
        <Selector gender="man" planet="mars" race="human"/> ,
        document.getElementById('container')
    );
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<meta charset="UTF-8">
	<title>Sci-Fi</title>
	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<script src="https://fb.me/react-0.14.3.js"></script>
	<script src="https://fb.me/react-dom-0.14.3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
	</head>
	<body>
	<div class="container">
	<h1>Задание №4</h1>
	<div class="row">
	<div class="col-md-6">
	<p>Это страница создания персонажа в онлайн-игрушке по мотивам научной фантастики начала XX века (игрушка воображаемая, мы её придумали специально для этого задания). Нужно сделать <strong>компонент на React.js для выбора параметров персонажа:</strong> планеты, расы и пола.</p>
	<ul>
	<li>планет всего три: «Земля», «Марс» и «Венера»;</li>
	<li>рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;</li>
	<li>полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).</li>
	</ul>
	<p>При создании компонента рекомендуется придерживаться здравого смысла и минимализма.</p>
	</div>
	<div class="col-md-6">
	<form>
	<div class="form-group">
	<label for="name">Имя</label>
	<input class="form-control" name="name" id="name">
	</div>
	<div id="container"></div>
	<input type="submit" class="btn btn-primary" value="Создать персонажа">
	</form>
	</div>
	</div>
	</div>
	<script type="text/babel">
	var Selector = React.createClass({

	// Иннициализируем state с переменной active
	getInitialState: function() {
	return { active:'btn' }
	},

	// Создаем функцию которая будет обрабатывать нажатия на кнопки и делать их активными и не активными.
	// Задаем функции buttonActive параметр
	buttonActive: function(e) {
	this.state.active.className = 'btn';
	e.target.className = 'btn active';
	this.state.active = (e.target);
	},
	render() {
	return (
	<div className = 'form-group btn-group btn-group-justified'>
	{ this.choiseHuman }
	<div className = 'btn-group'>
	<button className = 'btn btn-default' onClick={this.buttonActive}>Люди</button>
	</div>
	<div className = 'btn-group'>
	<button className = 'btn btn-default' onClick={this.buttonActive}>Марсиане</button>
	</div>
	<div className = 'btn-group'>
	<button className = 'btn btn-default' onClick={this.buttonActive}>Венериане</button>
	</div>
	</div>
	);
	}
	});
	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>