javascript - 与列表框绑定(bind)的下拉列表以及与按钮可见性绑定(bind)的列表框的项目选择 React

Question

我需要一个具有下拉列表的组件，该下拉列表从Web api填充，该下拉列表与一个列表框绑定(bind)，该列表框显示无序列表，该无序列表显示带有可编辑(可选择)复选框的项目，并且该组件有一个下载按钮。

基本上它是如何做的，1. 下拉列表显示文件夹中的目录，每个目录在下拉列表中显示为一个项目(不过就像字符串项目一样)。

选择目录后，下拉更改事件会调用 api，该 API 会显示该目录中的所有文件。这些文件仅显示为带有复选框的名称，作为与下拉列表绑定(bind)的列表框中的无序列表

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

用户做出选择并单击下载后，它会调用 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);

我的下拉菜单如下:

<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>)}

请帮忙

Answer 1

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

https://codesandbox.io/s/react-example-40wx5

(我使用 setTimeout 只是为了模仿 api 调用功能)

关于第4点，可以引用Stackoverflow中的这个问题关于如何下载 zip 文件。