React 级联下拉列表实现

// 数据结构
{
"status": "200",
"data": {
"groups": [
{
"name": "官方专区",
"todayposts": "0",
"gid": "1"
},
{
"name": "理财有道",
"todayposts": "0",
"gid": "64"
},
{
"name": "点友之家",
"todayposts": "0",
"gid": "65"
},
{
"name": "版务专区",
"todayposts": "0",
"gid": "59"
}
],
"subforums": {
"1": [
{
"name": "公告区",
"todayposts": "0",
"fid": "2"
}
...

<select value={ state.form.fid } onChange={ this.setStateByKey.bind(this, 'fid') } onFocus={ this.setActiveInput.bind(this, 'fid') } onBlur={ this.setActiveInput.bind(this, '') }>
<option value="0">选择版块</option>
{
Object.keys(modules).map((key) => (
modules[key].map((item) => (
<option key={item.fid} value={item.fid}>{item.name}</option>
))
))
}
</select>
</div>
{
state.form.fid && subModule[state.form.fid] ?
<div className="module bl-line">
<select value={ state.form.subFid } onChange={ this.setStateByKey.bind(this, 'subFid') }>
<option value="0">选择子版块</option>
{
subModule[state.form.fid].map((item) => (
<option key={item.fid} value={item.fid}>{item.name}</option>
))
}
</select>
</div> : ''
}

有疑问或技术交流，扫描公众号一起讨论学习。

更多React在线学习访问：http://each.sinaapp.com/react/index.html