Question

我想在满足条件的情况下启用ButtonGroup组件上的各个按钮。一旦满足条件，第一个按钮将启用，但我想扩展到其他按钮。一旦第一个按钮的操作完成，则应启用第二个按钮，而第二个按钮的操作完成后，则应启用第三个按钮

当使用this.setState({ disabled: [1, 2] });发出api请求时，我当前启用了第一个按钮，并且该按钮从子组件中打开一个本机模型。一旦从子组件内部关闭了该模式，并且我需要使用this.setState({ disabled: [2] });在父组件中启用第二个按钮，并且对第三个按钮也是如此，一旦关闭了第二个模型，就启用了第三个按钮。最初，使用状态变量disabled: [0, 1, 2]

禁用所有按钮

模态由第一个按钮打开，并使用本机按钮从子组件内部关闭。

onPress={() => {
  this.props.triggerModal();
}}

和上级组件

this.state = {
  display: false
}

triggerModal = () => {
  this.setState(prevState => {
    return {
      display: !prevState.display 
    };
  });
};

<DisplayModal
  display={this.state.display}
  triggerModal={this.triggerModal}
/>

这些是用于选择按钮的条件

<ButtonGroup
    onPress={this.updateIndex}
    selectedIndex={selectedIndex}
    buttons={buttons}
    containerStyle={{ height: 100 }}
    disabled={this.state.disabled} 
/>

ADD_DETAILS(index) {
    if (index === 0) {
      console.log("clicked 0");
      this.triggerModal();
      console.log(this.state.display);
    }
  }

  REQUEST_SECOND(index) {
    if (index === 1) {
      console.log("clicked 1");
      this.requestSecond();
    }
  }

  REQUEST_THIRD(index) {
    if (index === 2) {
      console.log("clicked 2");
    }
  }

任何帮助将不胜感激。

编辑

我已经通过在triggerModal函数中使用setState启用了第二个按钮，但是如果我已经关闭了第二个按钮将要打开的模式的话，我也需要启用第三个按钮，那将不是一个好方法。

  triggerModal = () => {
    this.setState(prevState => {
      return {
        display: !prevState.display
      };
    });
    this.setState({ disabled: [2] });
  };

满足条件时启用ButtonGroup按钮

编辑

0 个答案: