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

更多实例应用扫码体验：