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