Как грамотно написать такую функцию на reactJS?

Question

[Ваня Котик]

Народ. Уже перечитал все мануалы и пересмотрел примеры но что то никак не могу понять как написать такое. Буду благодарен если помножите. Нужно сделать компонент на React.js для выбора параметров персонажа: планеты, расы и пола.

планет всего три: «Земля», «Марс» и «Венера»;
рас три: люди, марсиане и венерианцы. Марсиане могут быть только с Марса, венерианцы только с Венеры, а люди могут с любой из трёх планет;
полов у людей два, у венерианцев — три (кроме мужского и женского есть средний), у марсиан пол вообще один (мужской).

var Selector = React.createClass({
      render() {
        return (
            <div>
                <input type='checkbox' checked={this.props.humanChecked} ref='humanCheckedInput' onChange={this.handleChange}/>{' '}Люди
                <br/>
                <input type='checkbox' checked={this.props.marsiansChecked ref='marsCheckedInput' onChange={this.handleChange}/>{' '}Марсиане
                <br/>
                <input type='checkbox' checked={this.props.veneriansCheckes} ref='veneriansCheckedInput' onChange={this.handleChange}/>{' '}Венерианцы
            </div>
        );
      }
    });
    ReactDOM.render(
        <Selector gender="man" planet="mars" race="human"/> ,
        document.getElementById('container')
    );

Как мне кажется инпутами не целесообразно реализовывать такой компонент. Если есть какие-то идеи или примеры такого компонента. Скиньте пожалуйста)

Comments

[ComodoHacker]

"Martian"

Answer 1

[Анатолий Медведев]

1. Просим выбрать рассу.
   
2. Просим выбрать пол.
   
3. Просим выбрать планету.
   

Все пункты появляются поочередно с нужными пунктами в зависимости от введенного перед этим, в удобном вам виде. Думаю в таком случае код будет простым.