React 級聯下拉列表實現

原創

2020-02-20 17:57

// 數據結構
{
"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> : ''
          }