webich · December 24, 2015 15:26
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({
        getInitialState: function() {
            return {
                race: this.props.race,
                planet: this.props.planet
        };
    },
    
    races: {
        mars: {
            human = 'Люди',
            marsian = 'Марсиане'
        }
        earth: {
            human = 'Люди',
            earthian = 'Земляне'
        }
        venera {
            human = 'Люди',
            venerian = 'Венерианцы'
        }
    },

    gender: {
        marsian: {
            male: 'Мужской'
        }
        earthian: {
            male: 'Мужской',
            female: 'Женский'
        }
        venerian: {
            male: 'Мужской',
            female: 'Женский',
            medial: 'Средний'
        }
    },

    RaceChange: function(event) {
    this.setState({ race: event.target.value });
    },

    PlanetChange: function(event) {
    this.setState({ planet: event.target.value });
    },

    renderRaces() {
        var arrayOfRaces = this.races[this.state.race];
        var arrayOfRacesOut = [];
            for (var key in arrayOfRaces) {
                arrayOfRacesOut.push (
                    <option value={key} key={key}>{arrayOfRaces[key]}</option>}
                    option);
            }
            return arrayOfRacesOut;
        },
    renderGender(){
        var arrayOfGenders = this.gender[this.state.gender];
        var arrayOfGendersOut = [];
            for (var key in arrayOfGenders) {
                arrayOfGendersOut.push (
                    <option value={key} key={key} data-planet={this.planet[this.state.planet]}>{arrayOfGenders[key]}</option>);
            }
            return arrayOfGendersOut;
    },

    render() {
        return (
            <div class="form-container">
                
                <h3>Planet</h3>
                <select name="planet" onChange={this.PlanetChange}>
                    <option value="mars">Mars</option>
                    <option value="earth">Earth</option> 
                    <option value="venera">Venera</option>  
                </select>

                <h3>Race</h3>
                <select name="race" onChange={this.RaceChange}>
                {this.renderRaces()}
                </select>

                <h3>Gender</h3>
                <select name="gender">
                {this.renderGender()}
                </select>
            
            </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({
	getInitialState: function() {
	return {
	race: this.props.race,
	planet: this.props.planet
	};
	},

	races: {
	mars: {
	human = 'Люди',
	marsian = 'Марсиане'
	}
	earth: {
	human = 'Люди',
	earthian = 'Земляне'
	}
	venera {
	human = 'Люди',
	venerian = 'Венерианцы'
	}
	},

	gender: {
	marsian: {
	male: 'Мужской'
	}
	earthian: {
	male: 'Мужской',
	female: 'Женский'
	}
	venerian: {
	male: 'Мужской',
	female: 'Женский',
	medial: 'Средний'
	}
	},

	RaceChange: function(event) {
	this.setState({ race: event.target.value });
	},

	PlanetChange: function(event) {
	this.setState({ planet: event.target.value });
	},

	renderRaces() {
	var arrayOfRaces = this.races[this.state.race];
	var arrayOfRacesOut = [];
	for (var key in arrayOfRaces) {
	arrayOfRacesOut.push (
	<option value={key} key={key}>{arrayOfRaces[key]}</option>}
	option);
	}
	return arrayOfRacesOut;
	},
	renderGender(){
	var arrayOfGenders = this.gender[this.state.gender];
	var arrayOfGendersOut = [];
	for (var key in arrayOfGenders) {
	arrayOfGendersOut.push (
	<option value={key} key={key} data-planet={this.planet[this.state.planet]}>{arrayOfGenders[key]}</option>);
	}
	return arrayOfGendersOut;
	},

	render() {
	return (
	<div class="form-container">

	<h3>Planet</h3>
	<select name="planet" onChange={this.PlanetChange}>
	<option value="mars">Mars</option>
	<option value="earth">Earth</option>
	<option value="venera">Venera</option>
	</select>

	<h3>Race</h3>
	<select name="race" onChange={this.RaceChange}>
	{this.renderRaces()}
	</select>

	<h3>Gender</h3>
	<select name="gender">
	{this.renderGender()}
	</select>

	</div>
	);
	}
	)};
	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>