Question

我正在使用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>
            )
    }
});

Answer 1

我认为这个组件试图做太多。拆分

FilteredList 项目清单 CostSelector

您可以生成一次成本地图数据并将其传递给每个ListItem将附加的CostSelector。

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

如何检索所有菜单选项

1 个答案: