0

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

基本上它是怎么做的，1.下拉显示文件夹中的目录，每个目录在下拉列表中显示为一个项目（尽管就像字符串项目一样）。

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

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

  3. 一旦用户做出选择并点击下载，它就会调用 web 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>)}

请提供任何帮助

4

1 回答 1

1

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

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

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

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

于 2019-10-09T01:29:36.900 回答