glebofff · December 26, 2015 18:00
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() {
        // naming it initialX clearly indicates that the only purpose
        // of the passed down prop is to initialize something internally
        return {
            race: this.props.race,
            gender: this.props.gender,
            planet: this.props.planet
        };
    },

    races: {
        human: {
            planets: {
                mars: 'Mars',
                earth: 'Earth',
                venera: 'Venera'
                },
            genders: {
                man: 'Man',
                woman: 'Women'
                }
            },
        venerian: {
            planets: {
                venera: 'Venera'
                },
            genders: {
                man: 'Man',
                woman: 'Women',
                third: 'Third'
                }
            },
        marsian: {
            planets: {
                mars: 'Mars'
                },
            genders: {
                man: 'Man'
                }
            }
        },

    onChangeRace(e) {
        this.setState({
            race: e.target.value
        });
    },

    onChangePlanet(e) {
        this.setState({
            planet: e.target.value
        });
    },

    onChangeGender(e) {
        this.setState({
            gender: e.target.value
        });
    },

    renderGender() {
        let currentRaceUid = this.state.race;
        let currentRace = this.races[currentRaceUid];
        let genders = [];
        let optionCount = Object.keys(currentRace.genders).length;
        for (let key in currentRace.genders) {
            if (currentRace.genders.hasOwnProperty(key)) {
                genders.push(
                    <span key={key}>
                <input type="radio" value={key} name="gender" onChange={this.onChangeGender} checked={this.state.gender === key || optionCount == 1} /> {currentRace.genders[key]}
                </span>
                );
            }
        }
        return genders;
    },

    renderPlanets() {
        let currentRaceUid = this.state.race;
        let currentRace = this.races[currentRaceUid];
        let planets = [];
        let optionCount = Object.keys(currentRace.genders).length;
        for (let key in currentRace.planets) {
            if (currentRace.planets.hasOwnProperty(key)) {
                planets.push(
                    <span key={key}>
                <input type="radio" value={key} name="planet" onChange={this.onChangePlanet} checked={this.state.planet === key || optionCount == 1} /> {currentRace.planets[key]}
                </span>
                );
            }
        }
        return planets;
    },

    render() {
        return (
            <div>
                <div className="races">
                    <input type="radio" name="race" value="human" onChange={this.onChangeRace} checked={this.state.race === 'human'} /> Human
                    <input type="radio" name="race" value="venerian" onChange={this.onChangeRace} checked={this.state.race === 'venerian'} /> Venerian
                    <input type="radio" name="race" value="marsian" onChange={this.onChangeRace} checked={this.state.race === 'marsian'} /> Marsian
                </div>
                <div className="genders">
                    {this.renderGender()}
                </div>
                <div className="planets">
                    {this.renderPlanets()}
                </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({
	getInitialState: function() {
	// naming it initialX clearly indicates that the only purpose
	// of the passed down prop is to initialize something internally
	return {
	race: this.props.race,
	gender: this.props.gender,
	planet: this.props.planet
	};
	},

	races: {
	human: {
	planets: {
	mars: 'Mars',
	earth: 'Earth',
	venera: 'Venera'
	},
	genders: {
	man: 'Man',
	woman: 'Women'
	}
	},
	venerian: {
	planets: {
	venera: 'Venera'
	},
	genders: {
	man: 'Man',
	woman: 'Women',
	third: 'Third'
	}
	},
	marsian: {
	planets: {
	mars: 'Mars'
	},
	genders: {
	man: 'Man'
	}
	}
	},

	onChangeRace(e) {
	this.setState({
	race: e.target.value
	});
	},

	onChangePlanet(e) {
	this.setState({
	planet: e.target.value
	});
	},

	onChangeGender(e) {
	this.setState({
	gender: e.target.value
	});
	},

	renderGender() {
	let currentRaceUid = this.state.race;
	let currentRace = this.races[currentRaceUid];
	let genders = [];
	let optionCount = Object.keys(currentRace.genders).length;
	for (let key in currentRace.genders) {
	if (currentRace.genders.hasOwnProperty(key)) {
	genders.push(
	<span key={key}>
	<input type="radio" value={key} name="gender" onChange={this.onChangeGender} checked={this.state.gender === key \|\| optionCount == 1} /> {currentRace.genders[key]}
	</span>
	);
	}
	}
	return genders;
	},

	renderPlanets() {
	let currentRaceUid = this.state.race;
	let currentRace = this.races[currentRaceUid];
	let planets = [];
	let optionCount = Object.keys(currentRace.genders).length;
	for (let key in currentRace.planets) {
	if (currentRace.planets.hasOwnProperty(key)) {
	planets.push(
	<span key={key}>
	<input type="radio" value={key} name="planet" onChange={this.onChangePlanet} checked={this.state.planet === key \|\| optionCount == 1} /> {currentRace.planets[key]}
	</span>
	);
	}
	}
	return planets;
	},

	render() {
	return (
	<div>
	<div className="races">
	<input type="radio" name="race" value="human" onChange={this.onChangeRace} checked={this.state.race === 'human'} /> Human
	<input type="radio" name="race" value="venerian" onChange={this.onChangeRace} checked={this.state.race === 'venerian'} /> Venerian
	<input type="radio" name="race" value="marsian" onChange={this.onChangeRace} checked={this.state.race === 'marsian'} /> Marsian
	</div>
	<div className="genders">
	{this.renderGender()}
	</div>
	<div className="planets">
	{this.renderPlanets()}
	</div>
	</div>
	);
	}
	});
	ReactDOM.render(
	<Selector gender="man" planet="mars" race="human"/> ,
	document.getElementById('container')
	);
	</script>
	</body>
	</html>