Реакция визуализации компонента на клик после другого компонента реакции

Question

Очень новое реагировать. Я создаю страницу с серией выпадающих меню, и идея заключается в том, что когда вы выбираете опцию в одном раскрывающемся списке, то под ним выставляется одинаковое выпадающее меню.

Все элементы div и selects/options являются компонентами React, и я попытался дать одному из них начальное состояние «firstTime == true», а затем, когда вы нажмете опцию (если это правда), она отображает другую <Dropdown /> элемент ниже события.target.parentElement.

var Dropdown = React.createClass({ 
    getInitialState: function() { 
    return{firstTime: true}; 
    }, 
    change: function(event){ 
    var x = event.target; 
    this.state.firstTime==true ? ReactDOM.render(<Dropdown options={OptionChoices} dropdownClass="Poop" />, wrapper) : console.log("oh well"); 
    this.setState({firstTime: false}); 
    }, 
    render: function() { 
    return (
     <select onChange={this.change} className={this.props.dropdownClass}> 
     {this.props.options.map(function(option){ 
      return (
       <Option value={option.value} key={option.value}>{option.label}</Option> 
      ); 
     })} 
    </select> 
    ); 
    } 
}); 

К сожалению, он продолжает расти: «Целевой контейнер не является элементом DOM». что имеет смысл, потому что я пытаюсь включить его в элемент, созданный с помощью реакции, но не слишком полезен для того, что я пытаюсь сделать.

Любая помощь приветствуется, и извините, если это действительно основной вопрос.

Fiddle: https://jsfiddle.net/y4wfLy1z/

Answer 1

Я хотел бы предложить, чтобы сделать всегда оба выбора опций (первый и один в визуализации) и скрыть второй варианты по первому зову.

Итак, в событии изменения первого вызова вы изменяете переменную состояния для видимости (this.state.dropdownClass), которая скрывает второй элемент. При изменении вы установите для className требуемое свойство класса (this.props.dropdownClass).

В ES6 это будет выглядеть как следующее:

export default class Dropdown extends React.Component { 
    constructor() { 
     super(); 
     this.firstTime = true; 
     this.first_options = [{value: 'first1', label: 'First Option 1'}, {value: 'first2', label: 'First Option 2'}]; 
     this.state = {dropdownClass: 'hide'}; 
    } 

    change(event) { 
     console.log('change'); 
     this.setState({dorpdownClass: this.props.dropdownClass}); 
    } 

    render() { 
     return (
      <div> 
       <select onChange={this.change.bind(this)} className='Poop'> 
        {this.first_options.map(function (option) { 
         return (
          <option value={option.value} key={option.value}>{option.label}</option> 
         ); 
        })} 
       </select> 
       <select onChange={this.change.bind(this)} className={this.props.dropdownClass}> 
        {this.props.options.map(function (option) { 
         return (
          <option value={option.value} key={option.value}>{option.label}</option> 
         ); 
        })} 
       </select> 
      </div> 
     ); 
    } 
}