Question

我要添加取消和重新启动按钮，以便用户单击“取消”按钮应停止下载项目数据，而重新启动应重新开始下载项目数据。

我要做什么？

我在开始页面上有一个项目列表。当我单击一个项目时，它将带我到另一页并开始下载项目详细信息。此下载通过带有取消按钮的进度条向用户显示。该取消按钮允许用户取消项目数据的下载。当用户移回到起始页面并单击相同的项目时，它会显示已停止的进度条。因此，在此应显示重新启动按钮，而不是取消按钮，单击重新启动按钮应重新开始下载项目数据。

到目前为止我尝试过什么？

我创建了一个承诺，以取消对服务器的load_item_data请求（该请求基本上下载与单击的项目有关的详细信息）。在单击取消按钮时，我将解决此承诺，并将load_cancel状态设置为true。当此状态为true时，我将显示重新启动按钮，并向服务器触发load_item_data请求。

这很好。下面是代码，

export default class ParentComponent extends React.PureComponent {
  constructor() {
    this.state = {
      load_cancel: false
    };
  }

  componentDidMount() {
    if (this.props.item) {
      this.load_item_data();
    }
  }

  componentDidUpdate() {
    if (current_item_id != prevprops.item_id) {
      this.setState({ load_cancel: false }, this.load_item_data);
    }
  }

  load_cancel = () => {
    this.setState({ load_cancel: true }, this.load_promise());
    if (this.state.load_cancel) {
      this.load_item_data();
    }
  };

  load_item_data = () => {
    const props = this.props;
    this.file_download_status = {};
    if (this.on_item_changed) {
      this.on_item_changed();
    }
    if (this.load_cancel) {
      this.load_cancel();
    }

    const item_changed = new Promise(resolve => {
      this.on_item_changed = resolve;
    });
    const load_cancel = new Promise(resolve => {
      this.load_cancel = resolve;
    });
    const on_load_cancel = new Promsie(resolve => {
      this.load_cancel_promise = resolve;
    });
    const abort_loading = Promise.race([
      item_changed,
      on_load_cancel,
      this.unmount
    ]);

    item
      .load(props.item.id, gl, this.update_download_progress, abort_loading)
      .then(result => {
        this.files = result.files;
        this.setState({
          item_download_done: true
        });
        client.add_item_view(props.item.id, abort_loading);
      });
  };

  render() {
    <ChildComponent
      load_cancel_state={this.state.load_cancel}
      load_cancel={this.load_cancel}
    />;
  }
}

export default class ChildComponent extends React.PureComponent {
  render() {
    <button onClick={this.props.load_cancel}>
      {this.props.load_cancel_state ? "restart" : "Cancel"}
    </button>;
  }
}

在上面的代码中，已使用load_item_data方法创建了on_load_cancel承诺。当用户单击“取消”按钮和在load_cancel按钮内调用的load_cancel_promise方法时，此问题即可解决。

我想做什么？

我想在子组件中有两个按钮，如下所示，

{
  "some condition  when this button should be displayed" && (
    <button onClick={this.props.load_cancel}>Cancel</button>
  );
}
{
  "some condition when this button should be displayed" && (
    <button onClick="somemethod to handle load restart trigger">Restart</button>
  );
}

但是我不确定要使用什么条件，例如单击此取消按钮停止下载以及当用户返回同一项目显示重启按钮时要跟踪的条件。

有人可以帮我解决这个问题吗？谢谢。

Answer 1

您可以尝试在父组件中创建一个函数，该函数将已取消的项目ID保存为状态（数组），我们将其称为cancelledItems，下次用户单击该项目并转到该屏幕时，将其命名为cancelledItems。您可以通过将该状态传递给子组件来检查项目ID是否为数组Contains()。

Answer 2

与国家打交道时，最好将重点放在正在发生的事情上而不是已经发生的事情上。在这种状态下，如果正在运行下载，则您的main属性可以是一个布尔值来存储。如果您打算一次允许一次下载，则必须是这样的：

constructor() {
    this.state = {
      isDownloading: false,
    };
  }

还有这样的渲染方法：

render(){    
{
      {this.state.isDownloading &&
        <button onClick={this.props.load_cancel}>Cancel</button>
      );
      {!this.state.isDownloading &&
        <button onClick="somemethod to handle load restart trigger">Restart</button>
      );
}

当下载更改时，必须使用setState更新isDownloading。

如何在reactjs中添加带有两个处理程序的两个按钮？

2 个答案: