React 级联下拉列表实现

最新推荐文章于 2025-06-14 11:20:48 发布

iteye_13003

最新推荐文章于 2025-06-14 11:20:48 发布

阅读量4.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： React 文章标签：乔乐共享众观千象每天进步一点点学习永无止境 React

本文链接：https://blog.youkuaiyun.com/iteye_13003/article/details/82650289

React 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何在React中创建级联下拉列表，包括技术交流和在线学习资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 数据结构
{
"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> : ''
          }