Javascript 如何检索所有菜单选项

我正在使用react生成一个选项菜单，目前只能检索上次创建的菜单选项。注意，我是通过循环创建选项的，所以这必须是我循环中的逻辑。任何建议都会有帮助

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>
            )
    }
});

var FilterMenu=React.createClass({
handleUserInput：函数（filterText，selectedOption）{
this.props.onUserInput（filterText，selectedOption）；
},
render:function（）{
返回(
)
}
});
var FilterViews=React.createClass({
render:function（）{
返回（）
}
});
var filteriems=React.createClass({
loadFiltersFromServer:函数（）{
ajaxServerRequest（）。然后（完成）；
var self=这个；
功能完成（响应）{
var filters=Object.keys（响应[0]）；
过滤器长度=10；
self.setState（{filters:filters}）；
}
},
getInitialState:function（）{//这些是正在加载的筛选器，而不是已选择的筛选器
返回{filters:[]}；
},
componentDidMount:function（）{
此.loadFiltersFromServer（）；
},
handleChange:function（）{
console.log（“！！！145-过滤器返回”，
this.refs.filterName.getDOMNode（）.innerText，
此.refs.FilterOptionInput.getDOMNode（）值，
this.refs.FilterTestInput.getDOMNode（）.value）；
这个.props.onUserInput(
此.refs.FilterTestInput.getDOMNode（）值，
此.refs.FilterOptions输入.getDOMNode（）.value
);
},
render:function（）{
var self=这个；
//log（'filteriems.this.props'，this.props）；
//var Cost=[].push（{filter.slice（5，filter.length）}）；
var成本=公寓成本范围.map（功能（成本、指数）{
报税表（
{成本}
)
});
var FilterItems=this.state.filters.map（函数（过滤器，索引）{
返回(
{filter}
{成本}
)
});
返回(
过滤项
快速搜索
{FilterItems}
)
}
});

我认为这个组件做得太多了。分开

过滤列表 列表项 成本选择器

您可以生成一次成本映射数据，并将其传递给每个ListItem将附加的成本选择器

目前，您将一组{Costs}传递给每个选项，react认为这只是一组选项。将整个select包装到一个组件中，并将属性传递给它