Как получить все опции меню

Question

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

var FilterMenu = React.createClass({ 
handleUserInput: function(filterText, selectedOption){ 
    this.props.onUserInput(filterText, selectedOption); 
}, 
render: function(){ 
    return (
     <div className="FilterMenu"> 
      <FilterViews/> 
      <FilterItems 
       filterText={this.props.filterText} 
       selectedOptions={this.props.selectedOptions} 
       onUserInput={this.handleUserInput} 
      /> 
     </div> 
     ) 
} 
}); 
var FilterViews = React.createClass({ 
    render: function(){ 
     return (<div className="FilterViews"></div>) 
    } 
}); 


var FilterItems = React.createClass({ 
    loadFiltersFromServer: function(){ 
     ajaxServerRequest().then(fulfilled); 
     var self = this; 
     function fulfilled(response){ 
      var filters = Object.keys(response[0]); 
      filters.length = 10; 
      self.setState({filters:filters}); 
     } 
    }, 
    getInitialState: function(){ //these are filters being loaded, not selected 
     return {filters:[]}; 
    }, 
    componentDidMount: function(){ 
     this.loadFiltersFromServer(); 
    }, 
    handleChange: function(){ 
     console.log('!!!145 - filter return', 
        this.refs.filterName.getDOMNode().innerText, 
        this.refs.filterOptionsInput.getDOMNode().value, 
        this.refs.filterTextInput.getDOMNode().value); 

     this.props.onUserInput(
      this.refs.filterTextInput.getDOMNode().value, 
      this.refs.filterOptionsInput.getDOMNode().value 
     ); 
    }, 
    render: function(){ 
     var self = this; 
     //console.log('FilterItems.this.props',this.props); 
     //var Cost = [].push(<option>{filter.slice(5,filter.length)}</option>); 
     var Cost = AppartmentCostRange.map(function(cost,index){ 
      return(<option value={cost} ref="filterOptionsInput" key={index}> 
         {cost} 
        </option>) 
     }); 

     var FilterItems = this.state.filters.map(function(filter, index){ 
      return (
       <div> 
        <span value={filter} ref="filterName" key={index}>{filter}</span> 
        <select> 

         {Cost} 
        </select> 
       </div> 
       ) 
     }); 

     return (
      <div className="FilterItems"> 
       <h3>Filter Items</h3> 
        Quick Search 
        <input 
         type="text" 
         placeholder="search.." 
         value={this.props.filterText} 
         ref="filterTextInput" 
         onChange={this.handleChange} 
        /> 
        <div onChange={this.handleChange}> 
         {FilterItems} 
        </div> 
      </div> 
      ) 
    } 
}); 

Answer 1

Я думаю, что этот компонент пытается сделать слишком много. Разделить его

FilteredList ListItem CostSelector

вы можете генерировать данные карты стоимости сразу и передать его в CostSelector, который прилагает каждый ListItem.

В настоящее время вы передаете один набор {Costs} для каждого варианта и реагируете, думая, что это всего лишь один набор параметров. Оберните весь выбор в компоненте и просто передайте ему свойства.