Javascript 与listbox绑定的下拉列表和与按钮绑定的listbox的项目选择

我需要一个组件，该组件有一个下拉列表，它从web api填充，该下拉列表与一个列表框绑定，它显示一个无序列表，无序列表显示带有可编辑（可选）复选框的项目，该组件有一个下载按钮

基本上是这样的,， 1.下拉列表显示文件夹中的目录，每个目录在下拉列表中显示为一个项目（尽管与字符串项目相同）​).

当选择目录时，dropdown change事件将调用api，api将显示该目录中的所有文件。这些文件仅显示为名称，复选框显示为与下拉列表绑定的列表框中的无序列表

在用户至少选中一个复选框或所有复选框之前，下载按钮将不可见，如果列表框中的所有项目都自动取消选中，则下载按钮应不可见

一旦用户做出选择并单击下载，它将调用web api，该api将对所有选定的文件进行压缩，并将其命名为下拉列表的选定文本，并允许用户在客户端下载zip文件

任何人都可以建议我从下面的代码，如何实现这个功能-提前感谢

class AccessData extends React.Component {
state = {
    files: [],
    communities: [],
    selectedCommunity: { display: 'Select a Community...', value: '' },
    communityValidationError: ""
 }

componentDidMount() {
    let env = clientConfiguration['Environment'];
    let x = `communitiesApi.${env}`;
    alert(clientConfiguration[x]);

    fetch(clientConfiguration['communitiesApi.local'])
        .then((response) => {
        return response.json();
    })
      .then(data => {
            let communitiesFromApi = data.map(community => { return { value: community, display: community } })
            this.setState({ communities: [{ value: '', display: 'Select a Community...' }].concat(communitiesFromApi) });
 })
.catch(error => {
    console.log(error);
    });
  }

handleDDLCommunityChange = (event) => {
    alert(event.target.value);
    this.setState({
        selectedCommunity: event.target.value
    });

    alert(this.state['selectedCommunity'].display);
 }

render() {
    return (
      <main>
        <div className="container">
        <div className="aqview-section">

        <div id="download_tool">
          <form id="download_form" method="post">
            <div className="row">
            <div className="col-md-12">
              <div className="header-box">
                <h2>Data Download Tool</h2>
              </div>
              <select id="communityName" title="Select a Community" name="communityName" onChange={"this.handleDDLCommunityChange.bind(this")} value={"this.state.selectedCommunity"}>
                {this.state.communities.map((community) => <option key={"community.value"} value={"community.value"}>{community.display}</option>)}
              </select>
              <div id="file_list_box">
                <p>
                  Data Files
                </p>
                <ul id="file_listing">
                  <li>Please select a community to display available files.</li>
                </ul>
              </div>
              <button id="download" styles="display: none;">Download</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</main>
);
}
}

export default connect()(AccessData);

class AccessData扩展React.Component{
状态={
文件：[]，
社区：[]，
selectedCommunity:{显示：'选择社区…'，值：''}，
社区验证错误：“”
}
componentDidMount（）{
让env=clientConfiguration['Environment']；
设x=`communitiesApi.${env}`；
警报（客户端配置[x]）；
获取（客户端配置['communitiesApi.local']）
。然后（（响应）=>{
返回response.json（）；
})
。然后（数据=>{
let communitiesFromApi=data.map（community=>{return{value:community，display:community}）
this.setState（{communities:[{value:''，display:'Select a Community…}）.concat（communities fromapi）}）；
})
.catch（错误=>{
console.log（错误）；
});
}
handleDDLCommunityChange=（事件）=>{
警报（事件、目标、值）；
这是我的国家({
selectedCommunity:event.target.value
});
警报（此.state['selectedCommunity'].display）；
}
render（）{
返回(
数据下载工具
{this.state.communities.map（（community）=>{community.display}）

数据文件


请选择一个社区以显示可用文件

下载
);
}
}
导出默认连接（）（AccessData）；

我的下拉列表如下：

<select id="communityName" title="Select a Community" name="communityName" onChange={this.handleDDLCommunityChange.bind(this)} value={this.state.selectedCommunity}>
{this.state.communities.map((community) => <option key={community.value} value={community.value}>{community.display}</option>)}

{this.state.communities.map（（community）=>{community.display}）

---

请提供任何帮助

以下是实现需求前3点所需的代码更改的工作示例-

（我使用setTimeout只是为了模拟api调用功能）

---

关于第4点，您可以参考关于如何下载zip文件的问题。

非常感谢Arpitha，但我有一个小问题可能需要澄清，您能告诉我如何准确获取所选下拉项的值，以便调用api从下面的代码段获取数据，但非常感谢阿皮萨我今天完成了它-非常感谢：）@Abdul如果它对你有帮助，至少投票支持这个答案或接受这个答案：）当然有，我无法用语言来描述它-谢谢安玛·阿皮萨你做得很好。@Abdul哈哈，你仍然可以接受这个答案：）。欢迎来到Stackoverflow，下面是您如何做到这一点的