Question

我正在尝试映射一个数组，并使用optgroups和selects创建一个select。但是，以下代码将仅输出optgroup;

var app = angular.module("myApp", []);


app.controller("ParentCntl", function($scope) {
    $scope.child= {};
    $scope.get = function(){
      return $scope.child.get(); // you can call it. it will return 'LOL'
    }
   // or  you can call it directly like $scope.child.get() once it loaded.
});

app.controller("ChildCntl", function($scope) {
    $scope.obj.get = function() {
            return "LOL";    
    };
});

有什么想法我也可以输出选项吗？

Answer 1

内部map()函数未返回任何对象。在您的return元素之前添加<option>。

<select name="clients">
    {this.props.clients && this.props.clients.length > 0 && this.props.clients.map((e, key) => {
        return <optgroup key={key} label={e.name}>
            {e.projects.map((project,projectKey) => {
                return <option key={projectKey} value={project.id}>{project.name}</option>
            })}
        </optgroup>;
    })}
</select>

Answer 2

好，看看吧。我的React项目中有以下两个文件。例如，第一个已经包含一些虚拟状态数据，调用了我的端点并填充了我的状态，并创建了我的Dropdown组件的实例。

在我的提取程序中，我还具有一些逻辑来动态创建要在我的optgroup定义中使用的类别组。也是一项检查，以确保我没有两次包含任何职业，即professional_id＃2。

state = {
    users: [{user_id: 0, user_name:"John", profession_id: 1, profession:"Developer"},
            {user_id: 1, user_name:"Bob", profession_id: 2, profession:"Janitor"},
            {user_id: 2, user_name:"Tony", profession_id: 2, profession:"Janitor"},
            {user_id: 3, user_name:"Steve", profession_id: 3, profession:"Electrician"}
    ],
    categories: [{prof_id: 1, prof_name:"Developer"},
                 {prof_id: 2, prof_name:"Janitor"},
                 {prof_id: 3, prof_name:"Electrician"}
    ]
}

componentDidMount(){
    this.fetchUsers();
}

fetchUsers = () => {
    fetch('http://localhost:9999/users')
    .then(response => response.json())
    .then(json => {
        json.forEach(user => {
            this.setState({ users: [...this.state.users, user] });

            if (!this.state.categories.some(
            category => category.prof_id == user.profession_id)) {
                let optionGroupData = {
                    prof_id: user.profession_id,
                    prof_name: user.profession_name
                }
                this.setState({ 
                    categories: [...this.state.categories, optionGroupData] 
                });
            }
        });
    })
    .catch(error => console.error(error));
}

render(){
    return(
        <Dropdown options={this.state.users} optionGroups={this.state.categories}/>
    )
}

Dropdown.js 这是下拉组件的无状态定义。所有数据均通过Dropdown属性从第一个文件传递。

我在内部创建了select标签，在其中首先要遍历category数组以呈现optgroup。对于第一个循环，它将呈现optgroup，然后遍历我的用户。如果用户的专业ID与optgroup ID相匹配，我将使用要显示在下拉菜单中的数据来呈现该选项。

render(){
    return(
        <select>
            this.props.optionGroups.map(optionGroup => {
                return (
                    <optgroup key={optionGroup.prof_id} label={optionGroup.prof_name}>
                        {this.props.options.map(option => {
                            if(option.profession_id == optionGroup.prof_id){
                                return(
                                    <option key={option.profession_id} value={option.id}> 
                                        {option.user_name}
                                    </option>
                                )
                            }
                        })}
                    </optgroup>
                )
            }
        </select>
    )
}

具有选项的ReactJS动态optgroup

2 个答案: